一、vue2和vue3的简单的比较
Vue2.0
首先vue2中的数据是通过Object.defineProperty去处理的，对于new Vue 配置项中的data，将其放置在vm._data中，对象引用类型操作同一地址，遍历data，取到属性key，Object.defineProperty（data,key,{}）然后进行一系列处理。
考虑性能问题，重新定义数组的原型来达到响应式。
Object.defineProperty 无法检测到对象属性的添加和删除 。
由于Vue会在初始化实例时对属性执行getter/setter转化，所有属性必须在data对象上存在才能让Vue将它转换为响应式。
深度监听需要一次性递归，对性能影响比较大。
function defineReactive(target, key, value) {
//深度监听
observer(value);
Object.defineProperty(target, key, {
get() {
return value;
},
set(newValue) {
//深度监听
observer(value);
if (newValue !== value) {
value = newValue;
updateView();
}
}
});
}
function observer(target) {
if (typeof target !== "object" || target === null) {
return target;
}
if (Array.isArray(target)) {
target.__proto__ = arrProto;
}
//遍历对象取key
for (let key in target) {
defineReactive(target, key, target[key]);
}
}
// 重新定义数组原型
const oldAddrayProperty = Array.prototype;
const arrProto = Object.create(oldAddrayProperty);
["push", "pop", "shift", "unshift", "spluce"].forEach(
methodName =>
(arrProto[methodName] = function() {
updateView();
oldAddrayProperty[methodName].call(this, ...arguments);
})
);
// 视图更新
function updateView() {
console.log("视图更新");
}
// 声明要响应式的对象
let data = {
name: "一路向北",
num: 1,
info: {
address: "北京" // 需要深度监听
},
nums: [666, 8788, 222]
};
// 执行响应式
observer(data);
Vue3.0
这个版本中
那么vue3的Proxy算是这次Vue 3.0 最大的亮点,它不仅取代了Vue 2.0 的 Object.defineProperty 方法并且组建生成增快，减少一般的内存使用。
基于Proxy和Reflect，可以原生监听数组，可以监听对象属性的添加和删除。
不需要一次性遍历data的属性，可以显著提高性能。
因为Proxy是ES6新增的属性，有些浏览器还不支持,只能兼容到IE11 。
const proxyData = new Proxy(data, {
get(target,key,receive){
// 只处理本身(非原型)的属性
const ownKeys = Reflect.ownKeys(target)
if(ownKeys.includes(key)){
console.log('get',key) // 监听
}
const result = Reflect.get(target,key,receive)
return result
},
set(target, key, val, reveive){
// 重复的数据，不处理
const oldVal = target[key]
if(val == oldVal){
return true
}
const result = Reflect.set(target, key, val,reveive)
console.log('set', key, val)
return result
},
deleteProperty(target, key){
const result = Reflect.deleteProperty(target,key)
console.log('delete property', key)
console.log('result',result)
return result
}
})
// 声明要响应式的对象,Proxy会自动代理
let data = {
name: "一路向北",
num: 1,
info: {
address: "北京" // 需要深度监听
},
nums: [666, 8788, 222]
};
二、setup的加入就是为了让vue3使用组合式API（Composition API）。使用组合式API更符合大型项目的开发，通过setup可以将该部分抽离成函数,让其他开发者就不用关心该部分逻辑
<!-- 父组件 -->
<!-- 3.0版本这层 <div class="home">可以干掉！ -->
<template>
<div class="home">
<div @click="isShow=!isShow">开关</div>
<HelloWorld v-if="isShow" :msg="msg" :num='num' @list='list'>
<template v-slot:www>
<div>slot插槽</div>
</template>
</HelloWorld>
<div>
计算属性:{{smallName}}
</div>
</div>
</template>
<script lang="ts">
//setup里面用的一些属性需要从vue中引入
import { defineComponent,computed,watchEffect,watch, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, reactive, ref } from 'vue';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
export default defineComponent({
name: 'Home',
components: {
HelloWorld,
},
setup(){
let obj={
name:'张三',
age:18,
fun:{
name:'王二',
age:22
}
}
//reactive针对引用类型对象类型、数组类型 通过proxy将目标对象 变成代理对象
let num=reactive(obj)
let objkey = reactive({
data:1,
});
// ref处理基本类型 number string等
let isShow=ref(true)
let msg=ref(1)
// 计算属性
let smallName = computed(()=>{
return num.name + '-' + num.age
})
// 监听属性
// 你可以认为他们是同一个功能的两种不同形态，底层的实现是一样的。
// watch- 显式指定依赖源，依赖源更新时执行回调函数
// watchEffect - 自动收集依赖源，依赖源更新时重新执行自身
//监听整个reactive对象：
watch(objkey, (n, o) => {
console.log('watch1:',n.data, o.data);
});
//监听某个属性：
watch(
[objkey, () => objkey.data],
(n, o) => {
console.log("watch2:", n, o);
}
);
// watchEffect - 自动收集依赖源，依赖源更新时重新执行自身
watchEffect(() => {
console.log('watchEffect',msg.value,objkey)
})
// 点击事件
function list(item:string){
msg.value+=1
num.name='李四'
num.fun.name='赵五'
objkey.data+=1
}
//return抛出去，模板上才可用这些值
return{
isShow,
num,
msg,
list,
smallName,
objkey
}
}
});
</script>
三、vue2与3的生命周期对比，以及vue3子组件props接收参数问题
// 子组件
<template>
<div class="hello">
<button @click="btn">子组件点击按钮</button>
<h4>子组件显示:{{ msg }}</h4>
<a href="#">子组件显示:{{num.fun.name}}</a>
<slot name="www"></slot>
</div>
</template>
<script lang="ts">
import { defineComponent,reactive, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, toRefs } from 'vue'
export default defineComponent({
name:'hollo',
props:{
msg:{
type:Number,
defalut:()=>''
},
num:{
type:Object,
defalut:{}
}
},
// 也就说在 setup 函数中是无法使用 data 和 methods 中的数据和方法，而methods等可以使用setup中return出去的数据
// setup(props,context) {
setup(props,{attrs,emit,slots}) {
// 1 props 是接受父向子传递的数据，并且需要子使用props接收所有的属性
// 2 context是setup第二个参数，解构出attrs,emit,slots。 attrs获取当前组件中所有的属性 emit方法事件分发 slots 插槽,props中暴露的变量，就不会在context.attrs中暴露
let { msg,num }=toRefs(props)
console.log('3x','setup')
console.log('props',props)
console.log('attrs',attrs)
console.log('slots',slots)
console.log('msg',msg)
const btn=()=>{
emit('list',msg)
}
onBeforeMount(()=>{
console.log('3x挂载前----onBeforeMount')
})
onMounted(()=>{
console.log('3x挂载后----onMounted')
})
onBeforeUpdate(()=>{
console.log('3x更新前----onBeforeUpdate')
})
onUpdated(()=>{
console.log('3x更新后----onUpdated')
})
onBeforeUnmount(()=>{
console.log('3x销毁钱----onBeforeUnmount')
})
onUnmounted(()=>{
console.log('3x销毁后----onUnmounted')
})
return{
btn
}
},
beforeCreate(){
console.log('2x---beforeCreate')
},
created(){
console.log('2x---created')
},
beforeMount(){
console.log('2x---beforeMount')
},
mounted(){
console.log('2x---mounted')
},
beforeUpdate(){
console.log('2x---beforeUpdate')
},
updated(){
console.log('2x---updated')
},
beforeUnmount(){
console.log('2x---beforeDestroy')
},
unmounted(){
console.log('2x---destroyed')
}
})
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
text-decoration: none;
}
.hello{
margin-top: 10px;
}
</style>
1、生命周期打印结果下图👇🏻
image.png
2、接下来我们在看看vue3里面的props的使用
1、父组件里面引入子组件，子组件上有msg是字符串和num是对象、 一个事件list、一个slot插槽
<HelloWorld v-if="isShow" :msg="msg" :num='num' @list='list'>
<template v-slot:www>
<div>slot插槽</div>
</template>
</HelloWorld>
let obj={
name:'张三',
age:18,
fun:{
name:'王二',
age:22
}
}
let count=1
let isShow=ref(true)
let msg=ref(count)
let num=reactive(obj)
2、子组件里接收父组件的数据
<script lang="ts">
import { defineComponent,reactive, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, toRefs } from 'vue'
export default defineComponent({
name:'hollo',
//这地方接收方式和vue2一样用props接收
//注意：！ 我们父组件传过来的msg和num如果在这接收了，那么setup内的attrs里面是看不到msg和num，
props:{
msg:{
type:Number,
defalut:()=>''
},
num:{
type:Object,
defalut:{}
}
},
// setup(props,context) {
setup(props,{attrs,emit,slots}) {
// 1 props 是接受父向子传递的数据，并且需要子使用props接收所有的属性
// 2 context attrs获取当前组件中所有的属性 emit方法事件分发 slots 插槽,props中暴露的变量，就不会在context.attrs中暴露
let { msg }=toRefs(props)
// 注：setup函数是处于生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数
// console.log('3x','setup')
console.log('props',props)
console.log('attrs',attrs)
console.log('slots',slots)
console.log('msg',msg)
const btn=()=>{
emit('list',msg)
}
return{
btn
}
},
})
</script>
