vue3新特性

vue3新特性

vite

使用vite体验更快速

$ npm init vite-app <project-name>

$ cd <project-name>

$ npm install

$ npm run dev

从vue2迁移

新特性

• Composition API

  Compostion API为vue应用提供更好的逻辑复用和代码组织。

  // 所有的东西都揉在一块儿
  setup() {
       
      const data = reactive({
       
        msg: "Hello Vite",
        msgTwo: "message two",
        counter: 0,
        doubleCounter: computed(() =>  data.counter * data.counter),
      });
      const desc = ref(null)
      
      let timer;
      
      watch(() => data.counter, (val, oldVal) => {
       
        desc.value.textContent = `counter change from ${
         oldVal} to ${
         val}`
      })
      
      onMounted(() => {
       
        timer = setInterval(() => {
       
          data.counter++;
        }, 1000);
      });
  
      onUnmounted(() => {
       
        clearInterval(timer);
      });
  
      return {
       
        data,
        desc      
      }
    }
  
  // 将与counter有关的逻辑抽离
  // setup函数部分
   setup(props) {
       
      const {
        counter, doubleCounter } = useCounter();
      const msg = ref("message one");
      const desc = ref(null)
      const msgTwo = ref('message two')
  
      watch(
        counter,
        (val, oldVal) => {
       
          desc.value.textContent = `counter change from ${
         oldVal