vue3：vue3版本变化

一. 响应式重构Proxy

重构响应式系统，使用Proxy替换Object.defineProperty，使用Proxy优势：

• 可直接监听数组类型的数据变化
• 监听的目标为对象本身，不需要像Object.defineProperty一样遍历每个属性，有一定的性能提升
• 可拦截apply、ownKeys、has等13种方法，而Object.defineProperty不行
• 直接实现对象属性的新增/删除

let test = {
    name: "小红",
    age: 15
  };
  test = new Proxy(test, {
    get(target, key) {
      let result = target[key];
      //如果是获取 年龄 属性，则添加 岁字
      if (key === "age") result += "岁";
        console.log('获取')
      return result;
    },
    set(target, key, value) {
      if (key === "age" && typeof value !== "number") {
        throw Error("age字段必须为Number类型");
      }
        console.log('设置')
      return Reflect.set(target, key, value);
    }
  });

test.age = 12 // '设置'
test.age = '111' // age字段必须为Number类型
console.log(`我叫${xiaohong.name}  我今年${xiaohong.age}了`); 
// 获取
// 获取
// 我叫小红，我今年12岁了

二. 新增Composition API，更好的逻辑复用和代码组织

三. 重构 Virtual DOM

• 模板编译时的优化，将一些静态节点编译成常量
• slot优化，将slot编译为lazy函数，将slot的渲染的决定权交给子组件
• 模板中内联事件的提取并重用（原本每次渲染都重新生成内联函数）

四. 代码结构调整，更便于Tree shaking，使得体积更小

五. 使用Typescript替换Flow

六. protoType替换为config.globalProperties

七. vue3移除filter，使用计算属性

八. css样式穿透 /deep/失效

vue3+vue-cli4里面/deep/自测不生效。
请使用

:deep(.className){
	
}

九. 增加 css动态样式

在style里面使用v-bind()动态更改样式，编译后是一个var()函数

	<template>
	  <div class="home">
	    <div class="text">1111</div>
	  </div>
	</template>
	
	<script>
	export default {
	  name: 'Home',
	  data() {
	    return {
	      color: 'blue',
	    };
	  },
	};
	</script>
	
	<style lang="less" scoped>
	  .text{
	    color:v-bind(color)
	  }
</style>

十. API对比

选项式 API	Hook inside setup
beforeCreate	Not needed*
created	Not needed*
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted
errorCaptured	onErrorCaptured
renderTracked	onRenderTracked
renderTriggered	onRenderTriggered

vue3相关组件

• PC：element-plus
• mobile：vant3.x