1、Vue3新API
1.Vue3新API
（1）setup
接受2个参数，props和context，props接受父组件的传值，后者暴露3个属性attrs，slots，emit
setup的执行时机在beforeCreate和created之间，this指向undefined
（2）ref
将基础类型转换成响应式对象
ref返回一个对象，使用.value调用数据，在template中可以直接使用
（3）reactive
reative将对象或者数组转成响应式的对象
（4）toRef
将对象的属性转成响应式
（5）toRefs
是toRef的批量操作，toRef一次改变一个属性，toRefs一次改变所有属性
（6）getCurrentInstance()
{ctx,proxy}都可以获取当前vue 的实例
（7）watch
watch实现的是浅监听，只能监听一层对象的属性，如果对象套对象，就需要设置deep
（8）生命周期
beforeCreate -> setup()
created -> setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
（9）组件是按需引入的
import { ref, toRef, toRefs, computed, watch, getCurrentInstance, reactive, component, onMounted } from 'vue'
（10）允许多个根组件
思考💡
ref、toRef、toRefs的区别？
参数不同：ref接受一个原始数据类型做参数；toRef接受对象某个属性为参数；toRefs接受一个对象做参数
原理不同：ref是对原始值的深拷贝，值改变不影响原始值；（视图展示的数据改变，原始值不改变，响应式数据对象改变了）
toRef()是对原数据的一个引用，当值改变时会影响到原始值；（视图展示的数据没有改变，原始值改变了，响应式数据对象改变了）
2.template
vue2.0只支持一个根组件 vue3.0不在约束根组件个数
<template>
<div>
<h2> {{ title }} </h2>
<input type='text' v-model='username' placeholder='Username' />
<input type='password' v-model='password' placeholder='Password' />
<button @click='login'>Submit</button>
<p>
Values: {{ username + ' ' + password }}
</p>
</div>
</template>
<template>
<h2> {{ title }} </h2>
<input type='text' v-model='state.username' placeholder='Username' />
<input type='password' v-model='state.password' placeholder='Password' />
<button @click='login'>Submit</button>
<p>
Values: {{ state.username + ' ' + state.password }}
</p>
</template>
2、proxy
// target是要拦截的目标对象，handler也是一个对象，定义拦截的行为
var proxy = new Proxy(target, handler);
vue2实现对象的监听：
class Observer {
constructor(data) {
for (let key of Object.keys(data)) {
if (typeof data[key] === 'object') {
data[key] = new Observer(data[key]);
}
Object.defineProperty(this, key, {
enumerable: true,
configurable: true,
get() {
console.log('访问属性调用get方法');
// 中括号和点运算符的区别 中括号支持变量名访问和数字访问
return data[key];
},
set(newVal) {
console.log('修改属性调用set方法');
data[key] = newVal;
}
})
}
}
}
let obj = {
name: 'app',
age: 18,
a: {
b: 1,
c: 2
}
}
let app = new Observer(obj);
//修改属性
app.age = 20;
// 访问属性
console.log(app.age);
// 新增属性
app.add = 'add操作'
console.log(app);
vue3实现对象的监听
let obj = {
name: 'app',
age: 18,
a: {
b: 1,
c: 2
}
}
let p = new Proxy(obj, {
get(target, key, receiver) {
console.log('调用了get方法');
return Reflect.get(target, key, receiver);
},
set(target, key, value, receiver) {
console.log('调用了set方法新增属性' + key + '值是' + value);
return Reflect.set(target, key, value, receiver)
}
})
p.age = 20;
console.log(p.age);
p.add = 'add值';
console.log(p.add);
// 调用了set方法新增属性age值是20
// 调用了get方法
// 20
// 调用了set方法新增属性add值是add值
// 调用了get方法
// add值
vue3 实现数组监听
let arr = [];
let p = new Proxy(arr, {
get(target, key, receiver) {
console.log('调用了get方法');
return Reflect.get(target, key, receiver);
},
set(target, key, value, receiver) {
console.log('调用了set方法');
return Reflect.set(target, key, value, receiver);
}
})
p.push(1);
console.log(arr);
p[0] = 5;
console.log(arr);
p.length = 5;
console.log(arr);
// 调用了get方法
// 调用了get方法
// 调用了set方法
// 调用了set方法
// [ 1 ]
// 调用了set方法
// [ 5 ]
// 调用了set方法
// [ 5, <4 empty items> ]
