vue原生js怎么写

Vue原生JavaScript如何书写？

在Vue中使用原生JavaScript，可以提高代码的灵活性和性能。通过操作DOM、使用原生事件、优化性能等方式，可以在Vue中有效地利用原生JavaScript。以下将详细介绍如何在Vue项目中使用原生JavaScript的方法和技巧。

一、操作DOM

1.1 使用`ref`访问DOM元素

在Vue中，可以通过ref属性来引用DOM元素，并在mounted钩子函数中访问这些元素。以下是一个简单的例子：

<template>
  <div>
    <button ref="myButton">Click Me</button>
  </div>
</template>
<script>
export default {
  mounted() {
    this.$refs.myButton.addEventListener('click', this.handleClick);
  },
  methods: {
    handleClick() {
      console.log('Button clicked!');
    }
  }
}
</script>

1.2 使用`document.querySelector`和`document.getElementById`

在Vue中，也可以直接使用原生JavaScript方法来选择DOM元素：

<template>
  <div id="app">
    <button id="myButton">Click Me</button>
  </div>
</template>
<script>
export default {
  mounted() {
    const button = document.getElementById('myButton');
    button.addEventListener('click', this.handleClick);
  },
  methods: {
    handleClick() {
      console.log('Button clicked!');
    }
  }
}
</script>

二、使用原生事件

2.1 添加和移除事件监听器

在Vue组件中，可以使用addEventListener和removeEventListener来添加和移除事件监听器。例如：

<template>
  <div>
    <button ref="myButton">Click Me</button>
  </div>
</template>
<script>
export default {
  mounted() {
    this.$refs.myButton.addEventListener('click', this.handleClick);
  },
  beforeDestroy() {
    this.$refs.myButton.removeEventListener('click', this.handleClick);
  },
  methods: {
    handleClick() {
      console.log('Button clicked!');
    }
  }
}
</script>

2.2 使用自定义事件

Vue提供了内置的事件系统，但有时需要使用原生JavaScript事件，例如自定义事件。以下是一个例子：

<template>
  <div>
    <button ref="myButton">Click Me</button>
  </div>
</template>
<script>
export default {
  mounted() {
    const event = new CustomEvent('myCustomEvent', {
      detail: { message: 'Hello, world!' }
    });
    this.$refs.myButton.addEventListener('myCustomEvent', this.handleCustomEvent);
    this.$refs.myButton.dispatchEvent(event);
  },
  methods: {
    handleCustomEvent(event) {
      console.log(event.detail.message);
    }
  }
}
</script>

三、优化性能

3.1 使用虚拟DOM

Vue的虚拟DOM机制可以有效地优化渲染性能，但有时需要手动优化。通过原生JavaScript，可以更细粒度地控制DOM操作。例如，在复杂的列表渲染中，可以使用requestAnimationFrame来优化：

<template>
  <div ref="listContainer"></div>
</template>
<script>
export default {
  mounted() {
    this.renderList();
  },
  methods: {
    renderList() {
      const container = this.$refs.listContainer;
      const fragment = document.createDocumentFragment();
      for (let i = 0; i < 1000; i++) {
        const item = document.createElement('div');
        item.textContent = `Item ${i}`;
        fragment.appendChild(item);
      }
      container.appendChild(fragment);
    }
  }
}
</script>

3.2 使用`requestAnimationFrame`

requestAnimationFrame可以优化动画和频繁的DOM操作：

<template>
  <div ref="animatedBox" style="width: 100px; height: 100px; background: red;"></div>
</template>
<script>
export default {
  mounted() {
    this.animateBox();
  },
  methods: {
    animateBox() {
      const box = this.$refs.animatedBox;
      let position = 0;
      const move = () => {
        position += 1;
        box.style.transform = `translateX(${position}px)`;
        if (position < 300) {
          requestAnimationFrame(move);
        }
      };
      requestAnimationFrame(move);
    }
  }
}
</script>

四、与第三方库集成

4.1 使用原生JavaScript库

在Vue项目中，可以直接使用原生JavaScript库，如Lodash、Moment.js等。以下是一个使用Lodash的例子：

<template>
  <div>
    <p>{{ shuffledArray }}</p>
  </div>
</template>
<script>
import _ from 'lodash';
export default {
  data() {
    return {
      array: [1, 2, 3, 4, 5]
    };
  },
  computed: {
    shuffledArray() {
      return _.shuffle(this.array);
    }
  }
}
</script>

4.2 使用DOM操作库

如JQuery等库也可以在Vue项目中使用，尽管Vue已经提供了强大的DOM操作能力，但在特殊情况下，可以使用这些库。例如：

<template>
  <div>
    <button id="myButton">Click Me</button>
  </div>
</template>
<script>
import $ from 'jquery';
export default {
  mounted() {
    $('#myButton').click(() => {
      alert('Button clicked!');
    });
  }
}
</script>

五、注意事项

5.1 避免直接操作DOM

尽量避免直接操作DOM，因为这可能会破坏Vue的虚拟DOM机制，从而导致性能问题。应优先使用Vue提供的指令和方法。

5.2 小心事件监听器的内存泄漏

在Vue组件中添加事件监听器时，确保在组件销毁前移除这些监听器，以避免内存泄漏。

<template>
  <div>
    <button ref="myButton">Click Me</button>
  </div>
</template>
<script>
export default {
  mounted() {
    this.$refs.myButton.addEventListener('click', this.handleClick);
  },
  beforeDestroy() {
    this.$refs.myButton.removeEventListener('click', this.handleClick);
  },
  methods: {
    handleClick() {
      console.log('Button clicked!');
    }
  }
}
</script>

5.3 与Vue的生命周期钩子配合使用

确保在Vue的生命周期钩子中使用原生JavaScript方法，例如mounted和beforeDestroy，以确保正确的初始化和销毁行为。

通过以上方法，可以在Vue项目中有效地使用原生JavaScript，从而提高代码的灵活性和性能。在实际开发中，应根据具体需求选择合适的方法，并遵循最佳实践，以确保代码的可维护性和性能。