93624428-53932780-f9ae-11ea-8d16-af949e16a09f.png
Vue3在vue2基础上的改变
1.创建和使用vue
// 引入的不再是Vue构造函数了，引入的是一个名为createApp的工厂函数
import { createApp } from 'vue'
import App from './App.vue'
// 创建应用实例对象——app(类似于之前Vue2中的vm，但app比vm更“轻”)
const app = createApp(App)
// 挂载
app.mount('#app')
2.Vue3组件中模板结构可以没有根标签
<template>
<div>这是Vue3</div>
<HelloWorld></HelloWorld>
</template>
vue3使用 watch 监听Proxy类型的对象时
因为用了proxy所以不需要配置deep: true，也是深度监听，并且配置deep: false无效
但是监听proxy的对象时，oldValue无法正确获取到，获取的与newValue相同
为解决以上问题有了特殊写法
let person = reactive({
name: '张三'
job: {
name: '程序员'
}
})
// 此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效
// 但是此处的oldValue还是不能正确获取
watch(()=>person.job,(newValue, oldValue) => {
console.log('person的job变化了', newValue, oldValue)
}, {deep:true})
// 此处监听的是person.name，是个基本类型不是对象，因此oldValue有效
watch(()=>person.name,(newValue, oldValue) => {
console.log('person的name变化了', newValue, oldValue)
})
