vue3特性笔记
1、综上所述，在 vue3 的初始化项目中，与 vue2 对比的最大差异其实就是两点：setup 函数也是 Composition API 的入口函数，我们的变量、方法都是在该函数里定义的，不再使用vue2中的data而是setup。
2、使用场景：由于 vue 有 $parent 属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过 provide / inject 可以轻松实现跨级访问祖先组件的数据。
3、toRef和toRefs可以理解为给 一个响应式对象 的一个或多个 属性创建ref对象 。ref的值会和响应式对象的值保持同步。 区别就是toRef是创建一个，toRefs是一下创建多个。
4、vue3中定义了emit属性，用于定义事件，注意如果emit出来的事件名与原生事件名一致(比如click)，父组件会监听到2次触发 一次来自 $emit()。另一次来自应用在根元素上的原生事件监听器。
5、使用Vite搭建Vue的TypeScript版本的时候，可以使用 Vite自带的模板预设 —— vue-ts 。
6、Vue3 使用了 Proxy 替换了原来的 Object.defineProperty 来实现数据响应。
vue3—reactive如何更改属性
vue3新增了响应性API，其中数据有两种， ref 和 reactive 。
去掉标签的scoped 属性，即使用全局样式 使用深度作用选择器/deep/，使用方式：将/deep/ + space空格 添加在第三方样式类的前面。
要动态修改对象的属性。那么要确切的掌握他们一些原理。
vue3的ref和reactive以及toRef和toRefs的区别。
1、toRef 函数可以为传入对象的某个属性新创建一个响应式引用 ref 。这个 ref 可以被传递，它会保持对其源 property 的响应式连接。 第一个参数为源对象，第二个参数为源对象中的属性名。
2、区别就是toRef是创建一个，toRefs是一下创建多个。 响应式对象可以是我们用reactive创建的对象，或者是setup函数中参数props。
3、reactive返回对象的响应式副本。这个比较好理解，跟以前x时代差别不大。
4、reactive reactive主要为对象添加响应式对象，接收一个对象作为参数，可以用于为表单等数据做统一响应式处理 toRefs toRefs 用于将响应式对象转换为结果对象，其中结果对象的每个属性都是指向原始对象相应属性的ref。
5、综上所述，在 vue3 的初始化项目中，与 vue2 对比的最大差异其实就是两点：setup 函数也是 Composition API 的入口函数，我们的变量、方法都是在该函数里定义的，不再使用vue2中的data而是setup。
6、可以看到，toRef还是返回的是对象，与原对象引用地址一样，因此修改toRef对象和原对象都会互相影响，但是视图确不会更新，因为他们不是响应式的对象。
vue3修改响应式代理值
对于 baseHandlers 来说，最主要的是劫持了 get 和 set 行为，这两个行为同时也能原生劫持 数组下标修改值及对象新增属性的行为， 这一点非常重要，因为 Object.defineProperty 就不行。
vue0 使用proxy代替了vue0版本中的defineProperty，首先利用compositionAPI中的 reactive() 函数返回一个proxy对象，使得数据可监测 target参数表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为。
而在 Vue 3 中，通过 Proxy 对象来实现响应式数据变化检测，Proxy 可以检测到数组元素的变化，因此使用索引修改数组的值也能触发组件重新渲染。
setup 是所有 Composition API 的容器，值为一个函数。
vue3新增了响应性API，其中数据有两种， ref 和 reactive 。
Vue3的ref和reactive区别及使用
1、父组件定义几个类型的data传递给子组件。基础类型用 ref，引用类型使用 reactive。因为这样可以有响应性。
2、vue-clio移除了config.文件夹。多了vue.config.js文件。新增了一个views文件夹。删除了static新增了public文件夹。index.html移动到public了。
3、toRef和toRefs可以理解为给 一个响应式对象 的一个或多个 属性创建ref对象 。ref的值会和响应式对象的值保持同步。 区别就是toRef是创建一个，toRefs是一下创建多个。
4、这在和其它选项式 API 一起使用 setup() 时可能会导致混淆。reactive() 接收一个普通对象然后返回该普通对象的响应式代理。等同于 x 的 Vue.observable()响应式转换是“深层的”：会影响对象内部所有嵌套的属性。
5、在Vue2中，后添加的属性是非响应式的。页面不更新。需要用get()和set()方法.（2）、Vue3：组合式API的作用是将原来分散开来定义的数据、方法、计算属性、监听器、组合起来定义一个完整的业务。
6、所以在 Vue3 使用计算属性，我们先需要在组件内引入computed。使用方式就和反应性数据（reactive data）一样，在state中加入一个计算属性：在 Vue2，this代表的是当前组件，不是某一个特定的属性。
以上内容为新媒号(sinv.com.cn)为大家提供！新媒号，坚持更新大家所需的前端知识。希望您喜欢！
版权申明：新媒号所有作品（图文、音视频）均由用户自行上传分享，仅供网友学习交流，不声明或保证其内容的正确性，如发现本站有涉嫌抄袭侵权/违法违规的内容。请发送邮件至 k2#88.com(替换@) 举报，一经查实，本站将立刻删除。
