vue3怎么安装（vue 怎么安装）



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 方法来替代

二、生命周期

三、ref - 简单的响应式数据

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 的 出口会带有隐含的名字“default”。

在向具名插槽提供内容的时候，我们可以在一个

十二、Suspense 和 异步 setup

组件的setup方法使用异步，页面在加载时会先显示 fallback内容，当setup函数执行完毕才会正常加载 home-swiper组件

Vue3-admin 快速上手实战项目

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/41662.html