Vue2.0和Vue3.x的生命周期对比
-
Vue2.0
-
Vue3.x
Vue3.x生命周期钩子函数
<div id="app">
<input type="number" v-model='num'>
<button @click='handleUnmount'>销毁</button>
</div>
<script>
const {createApp,reactive,ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} = Vue
const app= createApp({
setup(){
console.log('setUp执行')
let num = ref(0)
onBeforeMount(()=>{
console.log('onBeforeMount执行')
})
onMounted(()=>{
console.log('onMounted执行')
})
onBeforeUpdate(()=>{
console.log('onBeforeUpdate执行')
})
onUpdated(()=>{
console.log('onUpdated执行')
})
onBeforeUnmount(()=>{
console.log('onBeforeUnmount执行')
})
onUnmounted(()=>{
console.log('onUnmounted执行')
})
const handleUnmount = ()=>{
app.unmount()
}
return {
num,handleUnmount
}
}
})
let vm = app.mount('#app')
</script>
刚进入页面的时候会执行setUp函数,onBeforeMount函数,onBeforeUpdate函数,因为setUp执行在实例还没创建之前,所以可以代替之前Vue2的beforeCreate函数。
onBeforeUpdate函数,onUpdated函数的执行,发生在视图发生变化的时候。
调用unmount()方法销毁实例对象,同时视图也被销毁,这是和Vue2不同之处,onBeforeUnmount函数、onUnmounted函数。
响应式数据原理
Vue2.x底层的数据响应式系统使用的是Object.defineProperty()来实现的,Vue在初始化的时候会递归的将data选项中的属性绑定setter和getter,一旦初始化完成便不会再次执行本操作,对于为定义的属性就不能引起视图的变化,Vue3则解决了这个问题。
Object.defineProperty()
<script>
let obj = {}
// 通过defineProperty定义obj的name属性,并绑定setter和getter
Object.defineProperty(obj,'name',{
get(){
console.log('获取name的值')
return 123
},
set(v){
console.log('设置新值为',v)
}
})
obj.name = 456
console.log('name',obj.name)
// 因为没有定义age属性,所以不会触发name的监听
obj.age = 12
console.log('age',obj.age)
</script>
Proxy
Vue3通过代理对象Proxy包装之后返回的对象代表obj的完全代理。
<script>
let obj = {}
let objProxy = new Proxy(obj,{
set(traget,key,value){
console.log(`obj的${key}属性正在赋值:${value}`)
traget[key] = value
},
get(target,key){
console.log(`obj的${key}属性正在取值:${target[key]}}`)
return target[key]
}
})
</script>
Vue3实例演示
<div id="app">
<input type="text" v-model='userInfo.username'>
<input type="text" v-model='userInfo.password'>
<br>
{{userInfo}}
</div>
<script>
const {createApp,reactive} = Vue
const app= createApp({
setup(){
let userInfo = reactive({
username:'账号',
password:'密码'
})
return {
userInfo
}
}
})
let vm = app.mount('#app')
</script>