vue3（vue3双向绑定原理）

本篇文章给大家谈谈vue3，以及vue3双向绑定原理对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。 今天给各位分享vue3的知识，其中也会对vue3双向绑定原理进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、vue3成熟吗
• 2、构建实用VUE3项目
• 3、vue3 基础概念 （含与 vue2.6 的对比）
• 4、vue3的生命周期
• 5、聊一聊 Vue3 中响应式原理

vue3成熟吗

截至2022年4月vue3，VUE 3 可以说是相对成熟vue3了，但没有 VUE 2.× 成熟。

VUE 2.× 是一个比较稳定vue3的版本，也是很长一段时间大家在使用的版本，社区生态已经十分完善了，所以，如果我们暂时还不必须去着急升级到VUE 3，毕竟等待vue3的生态成熟，还需要一段时间的积累，但是作为前端领域必不可少的一门技能，当然希望能够提前去接触到，毕竟前端的技术迭代更新就是这么快。

Vue.js 的主要特点vue3：

1、易用：

在有HTML，CSS，JavaScript的基础上，快速上手。

Vue.js 的 API 是参考了AngularJS、KnockoutJS、Ractive.js、Rivets.js。

Vue.js 的 API 的对于其vue3他框架的参考不仅是参考，其中也包含了许多 Vue.js 的独特功能。

2、灵活：

简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。

3、性能：

20kb min+gzip 运行大小、超快虚拟 DOM 、最省心的优化。

以上内容参考：百度百科-Vue.js

构建实用VUE3项目

还没用几天VUE，就到3了，本文旨在记录构建一个实用项目模板昂。

1、自然是将VUE-CLI升级到最新版本啦（卸载旧的，安装zhui新的）

npm uninstall -g vue-cli

npm install -g @vue/cli

你要是想看看脚手架的版本，那敲这个

vue --version

2、构建你的项目吧

vue create myproject

进入配置的时候问你愿不愿意，你打YES就好

还有就是，既然想要VUE3的，记得选VUE3就好

到了这儿，一个原始的项目就有啦。

3、在项目目录中，建一个名叫vue.config.js的文件，并且在这个文件里导出一个对象。至于这个对象里的选项和配的值，那就又可以写一篇了

4、配置路由（和子路由）

1）安装好路由插件     cnpm i vue-router@next -D

2）在src目录下创建 router/index.js 

3）在根目录的main.js里面引入路由  import router from './router'

4)   在Vue对象中加入router的配置

import Vue from 'vue'

import VueRouter from 'vue-router'

import Login from '../views/Login.vue'

Vue.use(VueRouter)

  const routes = [

  {

    path: '/',

    redirect: '/login'

  },

  {

    path: '/login',

    name: 'Login',

    component: Login

  },

  {

    path: '/',

    component: resolve = require(['../views/Index.vue'], resolve),

    redirect: '/home',

    children: [

      {

        path: 'home',

        name: 'home',

        component: resolve = require(['../views/home/Home.vue'], resolve),

        meta: { title: '首页'}

      },

      {

        path: '/programCard',

        name: 'programCard',

        component: resolve = require(['../views/programCard/card.vue'], resolve),

        meta: { title: '路由1'}

      }

    ]

  }

]

const router = new VueRouter({

  mode: 'hash',

  base: process.env.BASE_URL,

  routes

})

export default router

5、安装VUEX并使用

1)安装vuex  cnpm i  vuex@next -D

2）在src目录下创建 store/index.js 

3）在根目录的main.js里面引入  import store from './store'

4)   在main.js里加入store的配置

6、配置axios

1)   安装vuex  cnpm i  axios@next -D

2)   在src目录建立api/request.js,并在其中引入axios       import axios  from 'axios'

在request.js中创建axios实例
添加请求-和响应-

再将实例导出export

3)在src目录建立api/index.js,引用axios实例，并统一定义请求函数

7、在src下建立views目录和路由子目录home/Home.vue

8、在assets目录增加css 、iconfont、images、js目录，存放资源

9、根目录下建立static\global.js

定义常量 const API_ROOT='127.0.0.1:8081'

建立对象window.global={

url:{

apiUrl:"http://"+API_ROOT+"/"

}

}

vue3 基础概念 （含与 vue2.6 的对比）

计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
通常更好的做法是使用计算属性而不是命令式的 watch 回调。

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括： push() 、 pop() 、 shift() 、 unshift() 、 splice() 、 sort() 、 reverse()

同时绑定多个事件

不同于组件和 prop ，事件名不存在任何自动化的大小写转换。因为 HTML 是大小写不敏感的，因此推荐你始终使用 kebab-case 的事件名。

使用场景：由于 vue 有 $parent 属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过 provide / inject 可以轻松实现跨级访问祖先组件的数据。
provide：Object | () = Object
inject：Array<string | { [key: string]: string | Symbol | Object }

提示： provide 和 inject 绑定并不是可响应的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。

动态组件：

异步组件：

混入 mixin 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

将插槽内容传送至指定位置，接受一个 to 的属性，它接受一个 css query selector 作为参数，这就是代表要把这个组件渲染到哪个 dom 元素中

Suspense 组件用于在等待某个异步组件解析时显示后备内容。

AsyncShow.vue

index.vue

vue3的生命周期

vue3的组合式api中，setup中的函数执行相当于在选项api中的beforeCreate和created中执行

除了beforeCreate和created外， 其他生命周期的使用都需要提前引入（轻量化）

除了beforeCreate和created被setup取代之外，选项式api和组合式api的映射如下：

beforeMount - onBeforeMount ，在挂载前被调用

mounted - onMounted ，挂载完成后调用

beforeUpdate - onBeforeUpdate ，数据更新时调用，发生在虚拟 DOM 打补丁之前。此时内存中的数据已经被修改，但还没有更新到页面上

updated - onUpdated ，数据更新后调用，此时内存数据已经修改，页面数据也已经更新

beforeUnmount - onBeforeUnmount ，组件卸载前调用

unmounted - onUnmounted ，卸载组件实例后调用。

errorCaptured - onErrorCaptured ，每当事件处理程序或生命周期钩子抛出错误时调用

renderTracked - onRenderTracked ，状态跟踪，vue3新引入的钩子函数，只有在开发环境有用，用于跟踪所有响应式变量和方法，一旦页面有update，就会跟踪他们并返回一个event对象

renderTriggered - onRenderTriggered ，状态触发，同样是vue3新引入的钩子函数，只有在开发环境有效，与onRenderTracked的效果类似，但不会跟踪所有的响应式变量方法，只会定点追踪发生改变的数据，同样返回一个event对象

activated - onActivated ，与keep-alive一起使用，当keep-alive包裹的组件激活时调用

deactivated - onDeactivated ，与keep-alive一起使用，当keep-alive包裹的组件停用时调用

聊一聊 Vue3 中响应式原理

Vue.js 3.0 "One Piece" 正式发布已经有一段时间了，真可谓是千呼万唤始出来啊！

相比于 Vue2.x ， Vue3.0 在新的版本中提供了更好的性能、更小的捆绑包体积、更好的 TypeScript 集成、用于处理大规模用例的新 API 。

在发布之前，尤大大就已经声明了响应式方面将采用 Proxy 对于之前的 Object.defineProperty 进行改写。其主要目的就是弥补 Object.defineProperty 自身的一些缺陷，例如无法检测到对象属性的新增或者删除，不能监听数组的变化等。

而 Vue3 采用了新的 Proxy 实现数据读取和设置拦截，不仅弥补了之前 Vue2 中 Object.defineProperty 的缺陷，同时也带来了性能上的提升。

今天，我们就来盘一盘它，看看 Vue3 中响应式是如何实现的。

The Proxy object enables you to create a proxy for another object, which can intercept and redefine fundamental operations for that object. MDN

Proxy - 代理，顾名思义，就是在要访问的对象之前增加一个中间层，这样就不直接访问对象，而是通过中间层做一个中转，通过操作代理对象，来实现修改目标对象。

关于 Proxy 的更多的知识，可以参考我之前的一篇文章 —— 初探 Vue3.0 中的一大亮点——Proxy ! ，这里我就不在赘述。

Vue3 中响应式核心方法就是 reactive 和 effect ， 其中 reactive 方法是负责将数据变成响应式， effect 方法的作用是根据数据变化去更新视图或调用函数，与 react 中的 useEffect 有点类似~

其大概用法如下：

默认会执行一次，打印 Hello , 之后更改了 data.name 的值后，会在触发执行一次，打印 World 。

我们先看看 reactive 方法的实现~

reactive.js

首先应该明确，我们应该导出一个 reactive 方法，该方法有一个参数 target ，目的就是将 target 变成响应式对象，因此返回值就是一个响应式对象。

reactive 方法基本结构就是如此，给定一个对象，返回一个响应式对象。

其中 isObject 方法用于判断是否是对象，不是对象不需要代理，直接返回即可。

reactive 方法的重点是 Proxy 的第二个参数 handler ，它承载监控对象变化，依赖收集，视图更新等各项重大责任，我们重点来研究这个对象。

handler.js

在 Vue3 中 Proxy 的 handler 主要设置了 get ， set ， deleteProperty ， has ， ownKeys 这些属性，即拦截了对象的读取，设置，删除， in 以及 Object.getOwnPropertyNames 方法和 Object.getOwnPropertySymbols 方法。

这里我们偷个懒，暂时就考虑 set 和 get 操作。

handler.get()

get 获取属性比较简单，我们先来看看这个，这里我们用一个方法创建 getHanlder 。

这里推荐使用了 Reflect.get 而并非 target[key] 。

可以发现， Vue3 是在取值的时候才去递归遍历属性的，而非 Vue2 中一开始就递归 data 给每个属性添加 Watcher ，这也是 Vue3 性能提升之一。

handler.set()

同理 set 操作，我们也是用一个方法创建 setHandler 。

Reflect.set 会返回一个 Boolean 值，用于判断属性是否设置成功。

完事后将 handler 导出，然后在 reactive 中引入即可。

测试几组对象貌似没啥问题，其实是有一个坑，这个坑也跟数组有关。

如上例子，如果我们选择代理数组，在 setHandler 中打印其 key 和 value 的话会得到 3 4 ， length 4 这两组值：

如果不作处理，那么会导致如果更新视图的话，则会触发两次，这肯定是不允许的，因此，我们需要将区分新增和修改这两种操作。

Vue3 中是通过判断 target 是否存在该属性来区分是新增还是修改操作，需要借助一个工具方法 —— hasOwnProperty 。

这里我们将上述的 createSetter 方法修改如下：

如此一来，我们调 push 方法的时候，就只会触发一次更新了，非常巧妙的避免了无意义的更新操作。

effect.js

光上述构造响应式对象并不能完成响应式的操作，我们还需要一个非常重要的方法 effect ，它会在初始化执行的时候存储跟其有关的数据依赖，当依赖数据发生变化的时候，则会再次触发 effect 传递的函数。

其基本雏形如下，入参是一个函数，还有个可选参数 options 方便后面计算属性等使用，暂时不考虑：

createReactiveEffect 就是为了将 fn 变成响应式函数，监控数据变化，执行 fn 函数，因此该函数是一个高阶函数。

createReactiveEffect 将原来的 fn 转变成一个 reactvieEffect ， 并将当前的 effect 挂到全局的 activeEffect 上，目的是为了一会与当前所依赖的属性做好对应关系。

我们必须要将依赖属性构造成 { prop : [effect,effect] } 这种结构，才能保证依赖属性变化的时候，依次去触发与之相关的 effect ，因此，需要在 get 属性的时候，做属性的依赖收集，将属性与 effect 关联起来。

依赖收集 —— track

在获取对象的属性时，会触发 getHandler ，再次做属性的依赖收集，即 Vue2 中的发布订阅。

在 setHandler 中获取属性的时候，做一次 track(target, key) 操作。

整个 track 的数据结构大概是这样

目的就是将 target ， key ， effect 之间做好对应的关系映射。

打印 targetMap 的结构如下：

**触发更新 —— trigger **

上述已经完成了依赖收集，剩下就是监控数据变化，触发更新操作，即在 setHandler 中添加 trigger 触发操作。

这样一来，获取数据的时候通过 track 进行依赖收集，更新数据的时候再通过 trigger 进行更新，就完成了整个数据的响应式操作。

再回头看看我们先前提到的例子：

控制台会依次打印 Hello ***** effect ***** 以及 World ***** effect ***** ， 分别是首次渲染触发跟更新数据重渲染触发，至此功能实现！

整体来说， Vue3 相比于 Vue2 在很多方面都做了调整，数据的响应式只是冰山一角，但是可以看出尤大团队非常巧妙的利用了 Proxy 的特点以及 es6 的数据结构和方法。另外， Composition API 的模式跟 React 在某些程度上有异曲同工之妙，这种设计模式让我们在实际开发使用中更加的方法快捷，值得我们去学习，加油！

最后附上仓库地址 github ，欢迎各位大佬批评斧正~

关于vue3和vue3双向绑定原理的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 vue3的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vue3双向绑定原理、vue3的信息别忘了在本站进行查找喔。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。