与vue2的不同
| 变更点 | 以前 | 现在 |
|---|---|---|
| 1、v-for中的ref | 定义：ref:'name' 使用：this.$refs.name 返回：this.$refs是数组格式 | 定义：:ref:'name' 使用： 1.要在methods中定义一个ref同名的方法,该方法返回element； 2.在该方法中将dom对象push到某data中（refsArr） name(el) {el && this.refsArr.push(el)},使用时直接this.refsArr[0]获取到某实例 返回：this.refsArr是Proxy类型的对象格式,防止单一的数组被恶意篡改 |
| 2、this.$children | 通过this.$children获取当前父组件的所有子组件 | 1.以前的$children没有了,this.$children = undefined 2.给每个子组件设置ref,通过this.$refs.name获取 |
| 3、插槽 | 1.v-slot指令(vue2.6之后,之前是属性组合(slot+slot-scope)的方式) | 1.属性组合的方式被废除了 |
| 4、响应式 | 响应式bug:采用了defineProperty的方式,setter没有做劫持数组下标的方式 | 修复了该bug:不再使用defineProperty的方法,调整为Proxy的方式 |
| 5、composition Api | 无 | 使用setup代替以前的data、methods等,setup函数中有两种方式定义响应式数据： 1)ref()方法； 2)reactive()方法； 相比传统方式（options Api）的优点在于： 1）更灵活的逻辑组织/抽象/复用能力； 2）没有this，没有烦恼，不必纠结this上到底有什么； 3）更好的类型推导能力（TypeScript）； 4）更友好的Tree-shaking支持（渐进式体验）； 5）更大的代码压缩空间 |
| 6、声明周期 | …… | setup的执行时间位于beforeCreate之前；setup函数内部也存在一个生命周期： 1）单词前加on； 2）定义在return之前； 3）函数的调用需要先import |
| 7、脚手架 | Cli | Vite 传统的构建方式(cli的webpack)保存重新编译要从头重新打包编译， |
注意
1、项目升级评估方向 1）项目量级及业务需求（不要为了技术的升级而升级） 2）团队能力 3）不兼容代码评估 4）第三方扩展插件评估 5）综合成本评估
### demo >5、composition Api ```js
}, }
