请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

葡萄城花卷
超级版主   /  发表于:2021-9-10 16:18  /   查看:1599  /  回复:0
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。

响应式系统(Reactivitysystems)是现代前端框架的关键部分之一。应用系统的的高度交互性、动态性和响应能力全靠它支持。每个Web开发人员而言都应该了解这一系统的功能和实践操作。
原理
响应系统是一种使自动使数据源(模型)与数据表示(视图)层自动保持同步的机制。每次模型更改时,都会重新渲染视图。
以一个简单的Markdown编辑器为例。通常编辑器有两个窗格:一个窗格用于编写Markdown代码(用于修改基础模型),另一个窗格用于预览已编译的HTML(显示已更新的视图)。当我们在书写窗格中写东西时,它会立即在预览窗格中自动预览。这个例子比较简单,在实际情况中会复杂很多。
在许多情况下,我们要显示的数据取决于其他数据。在这种情况下,需要跟踪相关数据,并根据跟踪情况来更新数据。例如,我们有一个fullName,该属性由firstName和lastName属性组成。修改其任何依赖项后,fullName将自动重新评估,并在视图中显示结果。
了解什么是响应式系统后,在了解Vue 3中的响应系统如何工作以及如何在实践中使用之前,让我们一起来快速回顾一下Vue2中的响应系统内容及其注意事项。
Vue 2的响应式系统简介
Vue 2中的响应或多或少会被“隐藏”。无论我们放置在data对象中的是什么,Vue都会使其隐式反应(reactive implicitly)。这样虽然可以使开发人员的工作更加轻松,但灵活度却会不可避免的降低。
在幕后,Vue2使用ES5 Object.defineProperty将data对象的所有属性转换为getter和setter。对于每个组件实例,Vue创建一个依赖关系观察程序实例,观察者会记录组件渲染期间依赖收集/跟踪的任何属性。当属性触发依赖项的设置器时,将通知观察者,并将组件重新渲染并更新视图。但是却也会有一些问题存在。

n  变更检测警告
由于Object.defineProperty方法的限制,Vue无法检测到某些数据更改。包括:
-       给对象添加属性或把对象移除属性(例如obj.newKey = value)
-       按索引设置数组项(例如arr[index] = newValue)
-       修改数组的长度(例如arr.length = newLength)

不过为了解决这些问题, Vue为提供了Vue.set API方法,该方法向响应对象添加了一个属性,确保新属性也是响应性的,从而触发了视图更新。
用下述实例讨论该情况:
  1. <div id="app">
  2.   <h1>Hello! My name is {{ person.name }}. I'm {{ person.age }} years old.</h1>
  3.   <button @click="addAgeProperty">Add "age" property</button>
  4.   <p>Here are my favorite activities:</p>
  5.   <ul>
  6.     <li v-for="item, index in activities" :key="index">
  7.       {{ item }}
  8.       <button @click="editActivity(index)">Edit</button>
  9.     </li>
  10.   </ul>
  11.   <button @click="clearActivities">Clear the activities list</button>
  12. </div>
复制代码

  1. const App = new Vue({
  2.   el: '#app',
  3.   data: {
  4.     person: {
  5.       name: "David"
  6.     },
  7.     activities: [
  8.       "Reading books",
  9.       "Listening music",
  10.       "Watching TV"
  11.     ]
  12.   },
  13.   methods: {
  14.     // 1. Add a new property to an object
  15.     addAgeProperty() {
  16.       this.person.age = 30
  17.     },
  18.     // 2. Setting an array item by index
  19.     editActivity(index) {
  20.       const newValue = prompt('Input a new value')
  21.       if (newValue) {
  22.         this.activities[index] = newValue
  23.       }
  24.     },
  25.     // 3. Modifying the length of the array
  26.     clearActivities() {
  27.       this.activities.length = 0
  28.     }
  29.   }
  30. });
复制代码

在上面的示例中,我们会发现这三种方法都不起作用。我们不能向该person对象添加新属性,无法使用activities的索引来编辑数组中的项目,也不能修改activities数组的长度。
优化如下:
  1. const App = new Vue({

  2.   el: '#app',

  3.   data: {

  4.     person: {

  5.       name: "David"

  6.     },

  7.     activities: [

  8.       "Reading books",

  9.       "Listening music",

  10.       "Watching TV"

  11.     ]

  12.   },

  13.   methods: {

  14.     // 1. Adding a new property to the object

  15.     addAgeProperty() {

  16.       Vue.set(this.person, 'age', 30)

  17.     },

  18.     // 2. Setting an array item by index

  19.     editActivity(index) {

  20.       const newValue = prompt('Input a new value')

  21.       if (newValue) {

  22.         Vue.set(this.activities, index, newValue)

  23.       }

  24.     },

  25.     // 3. Modifying the length of the array

  26.     clearActivities() {

  27.       this.activities.splice(0)

  28.     }

  29.   }

  30. });

复制代码

在此示例中,我们用Vue.setAPI方法将新age属性添加到person对象,并从活动数组中选择/修改特定项目。在最后一种情况下,使用JavaScript内置splice方法。
这个做法完全可行但却略显笨拙,而且会导致前后代码不一致。而Vue 3就解决了这个问题。
我们用下面示例继续看:
  1. const App = {
  2.   data() {
  3.     return {
  4.       person: {
  5.         name: "David"
  6.       },
  7.       activities: [
  8.         "Reading books",
  9.         "Listening music",
  10.         "Watching TV"
  11.       ]
  12.     }
  13.   },
  14.   methods: {
  15.     // 1. Adding a new property to the object
  16.     addAgeProperty() {
  17.       this.person.age = 30
  18.     },
  19.     // 2. Setting an array item by index
  20.     editActivity(index) {
  21.       const newValue = prompt('Input a new value')
  22.       if (newValue) {
  23.         this.activities[index] = newValue
  24.       }
  25.     },
  26.     // 3. Modifying the length of the array
  27.     clearActivities() {
  28.       this.activities.length = 0
  29.     }
  30.   }
  31. }

  32. Vue.createApp(App).mount('#app')
复制代码

可以看到在Vue 3中,所有方法都可以正常工作。
在Vue 2.6中,引入的Vue.observable API方法,一定程度的公开了响应式系统,使开发人员可以体验到响应式系统的内容。实际上,这和Vue内部用来包装data对象是完全相同的方法,对于在简单场景创建小的跨组件状态存储很有用。但依旧没办法和Vue3的响应式系统相比,接下来就为大家详细介绍。
注意:由于Object.defineProperty方法是仅限ES5且不可调整的功能,因此Vue 2不支持IE8及以下版本。
Vue 3响应式系统如何工作

为了充分利用ES6Proxy and Reflect API ,Vue 3中的响应式系统已被完全重写。新版本新增响应式API,该API使系统比以前更加灵活和强大。
ProxyAPI允许开发人员拦截和修改目标对象上的更低级对象操作。代理(proxy)是对象的克隆/包装(clone/wrapper),并提供特殊功能(称为target),这些功能响应特定的操作并覆盖JavaScript对象的内置行为(称为traps)。如果仍然需要使用默认行为,则可以使用相应的Reflection API,其名称顾名思义就是反映Proxy API的方法。这里有一个示例,用来了解如何在Vue 3中使用这些API:
  1. let person = {
  2.   name: "David",
  3.   age: 27
  4. };

  5. const handler = {
  6.   get(target, property, receiver) {
  7.     // track(target, property)
  8.     console.log(property) // output: name
  9.     return Reflect.get(target, property, receiver)
  10.   },
  11.   set(target, property, value, receiver) {
  12.     // trigger(target, property)
  13.     console.log(`${property}: ${value}`) // output: "age: 30" and "hobby: Programming"
  14.     return Reflect.set(target, property, value, receiver)
  15.   }
  16. }

  17. let proxy = new Proxy(person, handler);   

  18. console.log(person)

  19. // get (reading a property value)
  20. console.log(proxy.name)  // output: David

  21. // set (writing to a property)
  22. proxy.age = 30;

  23. // set (creating a new property)
  24. proxy.hobby = "Programming";

  25. console.log(person)
复制代码

要创建一个新的代理,使用new Proxy(target, handler)构造函数。它带有两个参数:目标对象(person对象)和处理程序对象,该对象定义将拦截哪些操作(get和set操作)。在handler对象中,get和set陷阱来跟踪何时读取属性以及何时修改/添加属性。设置控制台语句以确保运行正确。
在get和set陷阱采用下列参数:
-       target:代理包装的目标对象
-       property:属性名称
-       value:属性值(此参数仅用于设置操作)
-       receiver:进行操作的对象(通常是代理)
-        
ReflectAPI方法与其相应的代理方法接受相同的参数
注释中track函数和trigger函数特定用于Vue,用于跟踪何时读取属性以及何时修改/添加属性。
在示例的最后一部分,用控制台语句输出原始person对象。然后用另一份声明中读取属性name的proxy对象。接下来,修改age属性并创建一个新hobby属性。最后,再次输出该对象以查看它是否正确更新。
以上就是Vue3响应式系统的完整工作流程,但在实际工作中会复杂得多。
使用Vue 3响应式系统,还有一些注意事项:
-       仅适用于支持ES6 +的浏览器
-       响应代理不等于原始对象
总结

以上我们将Vue2和Vue3中响应式系统部分进行了比较,并对响应式系统的工作原理进行了说明,在后面的文章中,我们会进一步为大家介绍Vue3中响应式系统的API,敬请期待。

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部