浅谈 Vue3.0 与 Vue2 的不同

​

双向数据绑定原理

Object.defineProperty数据劫持 --> Proxy代理

新增组合式 API (Composition API)

把每个功能都写到一起或单独写在函数中。与之相反的是 Options API，每一个功能模块的开发至少要分散到 data 属性和 methods 属性。

setup 函数

1. 类似于生命周期，在 beforeCreate 生命周期之前自动调用

2. 没有 this

3. 包含的数据或方法都需要 return 出去

定义响应式数据

var、let 定义的数据不具有响应式功能（不具有数据双向绑定功能）

1. 定义基本数据类型

使用 ref 函数：引入 ref 函数

import { ref } from “vue”;

ref 函数返回值是对象

{
__v_isRef: true
_rawValue: “”
_shallow: false
_value: “”
}

M 层最终需要的值在 value 属性下，所以使用 .value 获取具体值

V 层不需要 .value 获取值，会自动找到 value

2. 定义复合数据类型

使用 reactive 函数：引入 reactive 函数

import { reactive } from “vue”;

生命周期

使用生命周期前需先引用；在 setup 中使用

import { onUpdated } from “vue”;

onUpdated( () => {
console.log(“触发 onUpdate 生命周期函数”)
})

计算属性

先引用；计算属性一般依赖于普通属性，先声明普通属性；使用 computed() 创建计算属性

// 只读
var numAdd = computed(() => {
return num.value + 1;
})

// 可读写
var numAdd = computed({
get: () => {
return num.value + 1;
}
set: val => {
num.value = val;
}
})

监听

先引用；使用 watch() 监听

// 单个数据

watch(num, (newValue, oldValue) => {
…
})
// 多个数据
watch([num1, num2], ([newNum1, newNum2], [oldNum1, oldNum2]) => {
…
})

依赖注入

父：provide(‘属性名’, ‘值’) -> 子：inject(‘属性名’)
//不具有响应式，可用 ref 变成响应式再传

Refs 模板

类似 Vue2 的 $refs

1. 在 setup() 中创建 ref 对象，值为 null

2. 为元素添加 ref 属性，与1的对象名保持一致

3. 页面渲染完成后使用

一些函数

1. readonly()：接收一个对象，返回对象的只读代理对象

2. watchEffect()：接收函数作为参数，并立即执行，当函数依赖的数据变化时，重新运行

3. unref()：参数若是 ref 数据，返回 value 值，否则返回参数本身

4. toRef()：把 reactive 对象中的一个属性创建成 ref 数据

5. isRef()：检查一个值是不是 ref 对象

6. isProxy()：检查对象是不是代理对象

7. isReactive()：检查对象是不是 reactive 代理对象

8. isReadonly()：检查对象是不是 readonly 代理对象

​