vue3学习—vue3的重大变化

一、vue3的重大变化

1、构造函数

vue2中：

const app = new Vue(options);
app.$mount("#app");
Vue.use();

new一个构造函数Vue实例，传入参数，然后挂载到某元素上。
如果使用一些插件，可以用Vue上的方法use。

vue3中：

const app = createApp(app);
app.$mount("#app");
app.use();

vue3中不存在构造函数Vue了，而是vue的应用对象createApp。
如果使用一些插件，用实例app上的方法use。

2、组件实例

下面我们输出一下vue3中this对象，这里是用的vue2的option api方式

export default {
     
  data: () =>({
     
    count: 0,
  }),
  methods: {
     
    increase() {
     
      console.log(this);
      this.count++;
    }
  }
}

可以看到返回的是一个代理对象，下面看看vue2和vue3的组件实例区别

在vue3中访问组件实例会通过组件代理对象，而不是直接访问组件实例了。

在vue3中

import {
      ref } from "vue";
export default {
     
  setup() {
     
    let count = ref(0);
    console.log(count);
    return {
     
      count,
    }
  }
}

我们会发现声明的数据输出居然是一个对象，然而页面中显示的是count.value，这就是组件实例代理对象的功劳了，我们访问count时代理会返回count.value给我们。

但是我们需要给数据进行处理时，我们还是要使用count.value，因为setup中没有this对象，this在这里是undefined。

import {
      ref } from "vue";
export default {
     
  setup() {
     
    let count = ref(0);
    const increase = () => {
     
      count.value++;
    };
    return {
     
      count,
      increase,
    }
  }
}

如果觉得这样不方便的话，可以这样做：

import {
      ref } from "vue";

function useCount() {
     
  let countRef = ref(0);
  const increase = () => {
     
    countRef.value++;
  };
  const decrease = () => {
     
    countRef.value--;
  };
  return {
     
    countRef,
    increase,
    decrease,
  };
}

export default {
     
  setup() {
     
    // console.log(this); // this -> undefined

    // setup中，count是一个对象
    // 实例代理中，count是一个count.value

    //1. 新增

    //2. 修改

    //3. 删除
    return {
     
      ...useCount(),
    };
  },
};