网站建立连接不安全怎么处理,贵阳小程序商城建设,运用虚拟机建设网站,上海企业自助建站系统什么是Vue中的响应式
Vue中的响应式#xff0c;简而言之就是当数据发生变化时#xff0c;页面跟随变化。使用过Vue的v-model都有比较深刻的感受#xff0c;我们在代码中修改双向绑定的数据后#xff0c;页面上的数据也会自动更新#xff0c;页面跟随变化 我们看个例子简而言之就是当数据发生变化时页面跟随变化。使用过Vue的v-model都有比较深刻的感受我们在代码中修改双向绑定的数据后页面上的数据也会自动更新页面跟随变化 我们看个例子
div idappdiv价格:{{ price }}/divdiv支付金额:{{ price * quantity }}/divbutton clickchangePrice改变价格/button
/divvar app new Vue({el: #app,data() {return {price: 5.0,quantity: 2};},methods: {changePrice() {this.price 10;}}
})在这个例子中我们调用changePrice方法修改price的值页面上价格 、支付金额都会自动改变。这就是Vue中的响应式
Vue中如何实现响应式
当数据发生变化后会重新对页面渲染这就是Vue响应式那么这一切是怎么做到的呢
想完成这个过程我们需要完成这几个步骤
1侦测数据的变化数据劫持 / 数据代理 2收集视图依赖了哪些数据依赖收集 3数据变化时自动“通知”需要更新的视图部分并进行更新发布订阅模式
1.侦测数据的变化数据劫持 / 数据代理
在Javascript中如何侦测一个对象的变化我们有两种办法可以侦测到变化使用Object.defineProperty和ES6的Proxy这就是进行数据劫持或数据代理。
在Vue2中使用的是Object.defineProperty的方式侦测数据的变化, 类似如下代码当属性被读取或设置时相应的getter或setter将被调用。修改obj.value的值时会监听到obj.value执行set方法执行console.log(obj.value)时又会调用get方法。 scriptconst obj {};// 定义属性value包含getter和setterObject.defineProperty(obj, value, {get() {console.log(get value);return this._value;},set(newValue) {console.log(set value);this._value newValue;},// 可以通过这个属性来控制属性的可枚举性configurable: true,// 可以通过这个属性来控制属性的可写性enumerable: true,});obj.value 5;console.log(obj.value); // get value ,set value, 5/script但在Vue3中使用的是ES6的Proxy的方式侦测数据的变化。 Proxy对象允许你拦截并自定义对象的基本操作包括属性访问和修改。这使得你可以创建一个代理对象当访问或修改目标对象的属性时会触发预定义的行为。如下代码示例
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title基础 ref/title/headbodybutton idupdateButton点击1/buttondiv idmessage/divscriptconst createRef (initialValue) {return new Proxy({ value: initialValue },{get(target, key) {return target[key];},set(target, key, value) {target[key] value;if (key value) {updateDisplay(); // 当.value被设置时更新DOM}return true;},});};// 初始化refconst numberRef createRef(0);// 更新DOM的函数const updateDisplay () {document.getElementById(message).innerText numberRef.value;};// 绑定按钮点击事件document.getElementById(updateButton).addEventListener(click, () {numberRef.value; // 点击按钮时计数器加一});// 初始显示updateDisplay();/script/body
/html2.收集视图依赖了哪些数据依赖收集
当模板渲染或计算属性计算时Vue 会追踪哪些数据被访问了。这通过 Dep 类和 Watcher 类完成。Watcher 会在读取数据时将自身添加到数据的依赖列表中。
订阅者 Dep 收集依赖需要为依赖找一个存储依赖的地方为此我们创建了Dep,它用来收集依赖、删除依赖和向依赖发送消息等。 于是我们先来实现一个订阅者 Dep 类用于解耦属性的依赖收集和派发更新操作说得具体点它的主要作用是用来存放 Watcher 观察者对象。我们可以把Watcher理解成一个中介的角色数据发生变化时通知它然后它再通知其他地方。 Dep的简单实现
class Dep {constructor () {/* 用来存放Watcher对象的数组 */this.subs [];}/* 在subs中添加一个Watcher对象 */addSub (sub) {this.subs.push(sub);}/* 通知所有Watcher对象更新视图 */notify () {this.subs.forEach((sub) {sub.update();})}
}以上代码主要做两件事情
用 addSub 方法可以在目前的 Dep 对象中增加一个 Watcher 的订阅操作 用 notify 方法通知目前 Dep 对象的 subs 中的所有 Watcher 对象触发更新操作
观察者 Watcher Vue 中定义一个 Watcher 类来表示观察订阅依赖。 watcher的简单实现
class Watcher {constructor(obj, key, cb) {// 将 Dep.target 指向自己// 然后触发属性的 getter 添加监听// 最后将 Dep.target 置空Dep.target thisthis.cb cbthis.obj objthis.key keythis.value obj[key]Dep.target null}update() {// 获得新值this.value this.obj[this.key]// 我们定义一个 cb 函数这个函数用来模拟视图更新调用它即代表更新视图this.cb(this.value)}
}3.数据变化时自动“通知”需要更新的视图部分并进行更新发布订阅模式
当数据被修改时对应的 Watcher 会收到通知并触发视图更新
