一队丝、vue2和vue3的簡單的比較
Vue2.0
首先vue2中的數(shù)據(jù)是通過Object.defineProperty去處理的，對于new Vue 配置項中的data酗宋，將其放置在vm._data中患亿，對象引用類型操作同一地址，遍歷data距境，取到屬性key，Object.defineProperty（data,key,{}）然后進行一系列處理垮卓。
考慮性能問題垫桂，重新定義數(shù)組的原型來達到響應式。
Object.defineProperty 無法檢測到對象屬性的添加和刪除 粟按。
由于Vue會在初始化實例時對屬性執(zhí)行g(shù)etter/setter轉(zhuǎn)化诬滩，所有屬性必須在data對象上存在才能讓Vue將它轉(zhuǎn)換為響應式霹粥。
深度監(jiān)聽需要一次性遞歸，對性能影響比較大疼鸟。
function defineReactive(target, key, value) {
//深度監(jiān)聽
observer(value);
Object.defineProperty(target, key, {
get() {
return value;
},
set(newValue) {
//深度監(jiān)聽
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]);
}
}
// 重新定義數(shù)組原型
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: "北京" // 需要深度監(jiān)聽
},
nums: [666, 8788, 222]
};
// 執(zhí)行響應式
observer(data);
Vue3.0
這個版本中
那么vue3的Proxy算是這次Vue 3.0 最大的亮點,它不僅取代了Vue 2.0 的 Object.defineProperty 方法并且組建生成增快后控，減少一般的內(nèi)存使用。
基于Proxy和Reflect空镜，可以原生監(jiān)聽數(shù)組浩淘，可以監(jiān)聽對象屬性的添加和刪除。
不需要一次性遍歷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) // 監(jiān)聽
}
const result = Reflect.get(target,key,receive)
return result
},
set(target, key, val, reveive){
// 重復的數(shù)據(jù)欣鳖，不處理
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: "北京" // 需要深度監(jiān)聽
},
nums: [666, 8788, 222]
};
二、setup的加入就是為了讓vue3使用組合式API（Composition API）茴厉。使用組合式API更符合大型項目的開發(fā)，通過setup可以將該部分抽離成函數(shù),讓其他開發(fā)者就不用關(guān)心該部分邏輯
<!-- 父組件 -->
<!-- 3.0版本這層 <div class="home">可以干掉什荣！ -->
<template>
<div class="home">
<div @click="isShow=!isShow">開關(guān)</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針對引用類型對象類型矾缓、數(shù)組類型 通過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
})
// 監(jiān)聽屬性
// 你可以認為他們是同一個功能的兩種不同形態(tài)，底層的實現(xiàn)是一樣的稻爬。
// watch- 顯式指定依賴源嗜闻，依賴源更新時執(zhí)行回調(diào)函數(shù)
// watchEffect - 自動收集依賴源，依賴源更新時重新執(zhí)行自身
//監(jiān)聽整個reactive對象：
watch(objkey, (n, o) => {
console.log('watch1:',n.data, o.data);
});
//監(jiān)聽某個屬性：
watch(
[objkey, () => objkey.data],
(n, o) => {
console.log("watch2:", n, o);
}
);
// watchEffect - 自動收集依賴源桅锄，依賴源更新時重新執(zhí)行自身
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接收參數(shù)問題
// 子組件
<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 函數(shù)中是無法使用 data 和 methods 中的數(shù)據(jù)和方法翠肘，而methods等可以使用setup中return出去的數(shù)據(jù)
// setup(props,context) {
setup(props,{attrs,emit,slots}) {
// 1 props 是接受父向子傳遞的數(shù)據(jù)，并且需要子使用props接收所有的屬性
// 2 context是setup第二個參數(shù)辫秧，解構(gòu)出attrs,emit,slots束倍。 attrs獲取當前組件中所有的屬性 emit方法事件分發(fā) 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盟戏、生命周期打印結(jié)果下圖????
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蝇摸、子組件里接收父組件的數(shù)據(jù)
<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內(nèi)的attrs里面是看不到msg和num，
props:{
msg:{
type:Number,
defalut:()=>''
},
num:{
type:Object,
defalut:{}
}
},
// setup(props,context) {
setup(props,{attrs,emit,slots}) {
// 1 props 是接受父向子傳遞的數(shù)據(jù)狡孔，并且需要子使用props接收所有的屬性
// 2 context attrs獲取當前組件中所有的屬性 emit方法事件分發(fā) slots 插槽,props中暴露的變量懂诗，就不會在context.attrs中暴露
let { msg }=toRefs(props)
// 注：setup函數(shù)是處于生命周期函數(shù) beforeCreate 和 Created 兩個鉤子函數(shù)之間的函數(shù)
// 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>
