Vue3初步了解
Soya / 2020-09-25 / 默认分类 / 阅读量 231

Vue3与Vue2的不同

Vue3 新特性 setup函数

Vue3最大的改变算是 composition API,而 setupcomposition API的入口函数

  • setup中定义值与方法与Vue2中的Opthions API定义有所不同,
  • 在Vue2 中 我们定义值和对象 我们会在 data中return一个对象中定义
  • 例如
<p>{{name}}<p>
  data() {
    return {
      name: Soya,
      obj:{
        site:'xiaoyio.com',
        age:18
      }
    };
  }
  • 而在Vue3中使用composition API我们定义值和对象的话我们需要引入 refreactive
  • 例如
<p>姓名:{{name}}<p>
<p>网址:{{obj.site}}<p>
import { ref, reactive } from "vue";

setup(){
  const name = ref('Soya');
  const obj = reactive({
    site:'www.xiaoyio.com',
    age:18
  });
  return {name obj}
}

代码截图

截图

注意点

  1. setup 中只能是同步的 不能是异步
  2. setup 位于 beforeCreatecreated 生命周期中间,因此没有办法使用 datamethods
  3. Vue3 为了避免在setup中使用 datamethods 直接将this改成了undefined
  4. 修改ref定义是值的时候需要带上.value
 const count = ref(0);
  /* 
      通过ref定义的值被自动转换成了
      let count = ref(0) -> let count = reactive({value:0})
      因此我们修改ref定义的值的时候需要使用 count.value
      但是在template中使用ref定义的值不需要带上.value 因为Vue3在template中对ref定义的值自动使用了.value
  */
  function add() {
    count.value += 1;
  }
  1. 修改reactive定义的对象的时候,如果传入不同类型的对象的时候可以直接赋值
  let time = reactive({ time: new Date() });
  /* 
   如果给reactive传一个其他对象的话,值会修改,界面不会修改
   如果想更新界面的话,可以直接赋值
   下面的代码是界面不更新的
    function checkTime() {
      time.tiem = time.time.setDate(time.time.getDate() + 1);
       console.log(time.time);
    }
  */
  function checkTime() {
    let newTime = new Date(time.time);
    newTime.setDate(newTime.getDate() + 1);
    time.time = newTime;
    console.log(time.time, newTime);
  }
  1. 使用setup 最后要将方法和对象暴露出来,要进行 return {}

使用 composition API 可以更清晰的将操作对应的某个模块的代码抽离,引入

截图2

也可以将每一个方法抽离成单独一个js文件,进行引入