Vue3-admin 快速上手实战项目
1、vue3中全部采用函数式写法，替换了原来类的写法，
2、移除了原有的生命周期函数，和data、computed、watch、method等vue2中的对象，去掉了this, 并且去除了过滤器api -> filter
3、vue3源码全部采用ts编写，编码中实现了对ts更好的支持
4、vue3完全兼容vue2，在vue3中依然可以按照vue2的方式去写代码，而且两种写法可以同时存在，
6、vue3采用proxy的方式实现数据代理，只会代理第一层数据 避免了vue2中对data的深层递归，提升了组件渲染性能
如下所示：
讯享网
当我们要对深层对象obj进行修改时，会调用 state.data 的get方法，在get方法中会对state.data 进行代理，劫持state.data中的属性， get方法返回的不是state.data本身，而是被proxy代理过的对象，从而巧妙的实现了深层数据劫持，在用到该属性的时候一定会调用父级的get方法，这时候才会去劫持属性的get和set方法
一、setup函数
setup函数是vue3中所有api的入口和出口
vue3中用setup函数整合了所有的api, setup函数只执行一次，在生命周期函数前执行，所以在setup函数中拿不到当前实例this，不能用this来调用vue2写法中定义的方法
vue3中去掉了data，使用setup的返回值来给模板绑定value
return 的对象如果是常量，不会变成响应式数据
this.\(emit 用 context.emit 方法来替代</p> <pre></pre> <h4>二、生命周期</h4> <p>生命周期函数，都变成了回调的形式，写在setup函数中<br /> 可以一次写多个相同的生命周期函数，按照注册顺序执行</p> <pre></pre> <h4>三、ref - 简单的响应式数据</h4> <p>1、ref可以将某个普通值包装成响应式数据，仅限于简单值，内部是将值包装成对象，再通过defineProperty来处理的<br /> 通过ref包装的值，取值和设置值的时候，需用通过value来进行设置</p> <p>2、可以用ref来获取组件的引用，替代this.\)refs的写法
讯享网
四、reactive - 数据绑定
通过reactive来创建响应式数据data，用toRefs来进行解构，在模板中直接使用 inputVal、todoList
模板中绑定的方法也需要 在setup函数中定义，并返回，才能绑定到模板中，例如addTodo方法
vue3模板: 一个templage可以有多个平级的标签（vue2中只能在template写一个子标签）
五、 computed
讯享网
六、 watch
变成了函数写法，与vue2中用法相同
七、watchEffect 新增方法
响应式地跟踪函数中引用的响应式数据，当响应式数据改变时，会重新执行函数
讯享网
八、 vue-router
组件中使用路由时用useRoute和useRouter
九、 vuex
讯享网
十、用jsx来定义vue组件
vue3中支持使用jsx语法来定义vue组件
十一、插槽修改
讯享网
一个不带 name 的 <slot> 出口会带有隐含的名字“default”。
在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称，也可以使用v-slot的简写方式#， v-slot:header等价于 #header
十二、Suspense 和 异步 setup
讯享网
组件的setup方法使用异步，页面在加载时会先显示 fallback内容，当setup函数执行完毕才会正常加载 home-swiper组件
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/182740.html