前端学习之路(4) vue2和vue3的区别

一. 根节点不同

创建前：beforeCreate -> 使用setup()

创建后：created -> 使用setup()

挂载前：beforeMount -> onBeforeMount

挂载后：mounted -> onMounted

更新前：beforeUpdate -> onBeforeUpdate

更新后：updated -> onUpdated

销毁前：beforeDestroy -> onBeforeUnmount

销毁后：destroyed -> onUnmounted

异常捕获：errorCaptured -> onErrorCaptured

被激活：onActivated 被包含在中的组件，会多出两个生命周期钩子函数。被激活时执行。

切换：onDeactivated 比如从 A 组件，切换到 B 组件，A 组件消失时执行

vue2通过Object.definedProperty()的get()和set()来做数据劫持、结合和发布订阅者模式来实现，Object.definedProperty()会遍历每一个属性。
vue3通过proxy代理的方式实现。
proxy的优势：不需要像Object.definedProperty()的那样遍历每一个属性，有一定的性能提升proxy可以理解为在目标对象之前架设一层"拦截"，外界对该对象的访问都必须通过这一层拦截。这个拦截可以对外界的访问进行过滤和改写。
当属性过多的时候利用Object.definedProperty()要通过遍历的方式监听每一个属性。利用proxy则不需要遍历，会自动监听所有属性，有利于性能的提升

匿名插槽

子组件：
<div>
	<slot></slot>
</div>

父组件：
<child>
  <span>我是插槽插入的内容</span>
</child>

具名插槽

子组件：
<div>
  <slot name="person"></slot>
</div>

父组件：
<child>
  <span slot="person">我是插槽插入的内容</span>
</child>

作用域插槽：父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。不过，我们可以在父组件中使用slot-scope 特性从子组件获取数据

<div>
  <slot :data="data"></slot>
</div>
父组件：
<child>
  <span slot-scope="data">我是插槽插入的内容</span>
</child>

匿名插槽：和在vue2中一样

具名插槽：

子组件：
<div>
  <slot name="person"></slot>
</div>
父组件：
<child>
  <template v-slot:person>
    <span>我是插槽插入的内容</span>
  </template>
</child>

作用域插槽：

子组件：
<div>
  <slot :data="data"></slot>
</div>
父组件：
<child>
  <span #data>我是插槽插入的内容</span>  === <span #default="{data}">我是插槽插入的内容</span>
</child>

具名插槽使用方式不同：vue2使用slot='',vue3使用v-slot:''
作用域插槽使用方式不同：vue2中在父组件中使用slot-scope="data"从子组件获取数据，vue3中在父组件中使用 #data 或者 #default="{data}"获取

vue2中：

/deep/ .类名{}
::v-deep .类名{}

vue3中：

:deep (.类名{})
::v-deep(.类名{})