创建实例
-
vue2 :引入vue构造函数,主要依靠render( (creatElement) => {})创建app实例对象
//引入vue import Vue from 'vue' //引入App import App from './App.vue' //创建vm new Vue({ el:'#app', render: *h* *=>* h(App), router:router })//.$mount('#app')
-
vue3:按需引入,直接用引入的createApp创建实例对象
//引入的不再是vue构造函数,而是叫createApp的工厂函数 import { createApp } from 'vue' import App from './App.vue' //创建应用实例对象-app(类似于v2中的vm,但app比vm更轻)并挂载 createApp(App).mount('#app')
响应式原理
-
Vue2:
实现原理:
- 对象类型:通过Object.definrProperty()对属性的读取、修改进行拦截(数据劫持)。
- 数组类型:通过重写更新数组的一系列方法来实现拦截。(对数组的变更方法进行了包裹)
存在的问题:
-
新增属性、删除属性,界面不会更新
新增属性:this.person.sex=‘女’ 界面不更新的,如果想让它自动更新 那么需要写成如下:
this.$set(this.person,‘sex’,‘女’) 或者 引入Vue,然后 Vue.set(this.person,‘sex’,‘女’)
删除属性:delete this.person.sex 属性可以删除,界面不更新,也是需要改变写法:
this.$delete(this.person,‘sex’) 或者 引入Vue, Vue.delete(this.person,‘sex’)
-
直接通过更改下标修改数组,界面不会自动更新
修改数组同理:this.person.hobby[0]=‘学习’ ,不更新,同样的方法:
this.$set(this.person.hobby,0,‘学习’) 或者 引入Vue,然后 Vue.set(this.person.hobby,0,‘学习’) 或者 this.person.hobby.splice(0,1,‘学习’)
模拟Vue2响应式实现原理:
/* let p = {} Object.defineProperty(p,'name',{ configurable:true, get(){ //有人读取name时调用 return person.name }, set(value){ //有人修改name时调用 console.log('有人修改了name属性,我发现了,我要去更新界面!') person.name = value } }) Object.defineProperty(p,'age',{ get(){ //有人读取age时调用 return person.age }, set(value){ //有人修改age时调用 console.log('有人修改了age属性,我发现了,我要去更新界面!') person.age = value } })
-
Vue3:
实现原理:
- 通过Proxy(代理):拦截对象中任意属性的变化,包括增删改查
- 通过Reflect(反射):对源对象的属性进行操作
模拟Vue3响应式实现原理:
const p = new Proxy(person,{ //有人读取p的某个属性时调用 get(target,propName){ console.log(`有人读取了p身上的${propName}属性`) return Reflect.get(target,propName) }, //有人修改p的某个属性、或给p追加某个属性时调用 set(target,propName,value){ console.log(`有人修改了p身上的${propName}属性,我要去更新界面了!`) Reflect.set(target,propName,value) }, //有人删除p的某个属性时调用 deleteProperty(target,propName){ console.log(`有人删除了p身上的${propName}属性,我要去更新界面了!`) return Reflect.deleteProperty(target,propName) } })
一个小知识:如果我们用Object.defineProperty去给一个对象添加属性,如果重复添加,那么代码就会直接崩了;然而用映射Reflect.defineProperty去添加,不会报错,只是通过返回值true或者false来告诉是否操作成功,后面的代码依然能继续执行
生命周期函数
-
vue2:
- 有了Vue实例对象就先beforeCreate
- created完之后去判断有没有绑定根组件,有没有template模板,如果有就继续走挂载流程beforeMount和mouted,如果没有就停滞了,等到$mount()了再走
- 组件销毁要走beforeDistroy和distroyed
-
vue3:
-
创建实例对象之前就要去检查有没有创建const app = cre
-