Vue原理

v-router的原理

hash的特点

• hash变化会触发网页跳转既浏览器前进、后退
• hash变化不会刷新页面&＃xff0c;SPA&＃xff08;单页面应用&＃xff09;必须的特点
• hash永远不会提交到sever端

通过onhashchange监听hash的变化从而触发视图的更新

vue2.0响应式原理&＃xff08;Object.defineProperty&＃xff09;

数据是对象&＃xff1a;对每一个对象的属性都通过Object.defineProperty绑定监听&＃xff08;层级深的就递归绑定&＃xff09;
数据是数组&＃xff08;通过重写数组方法的方式来触发页面渲染&＃xff09;&＃xff1a;将这个数组原型指向一个被重写push&＃xff0c;pop&＃xff0c;shift&＃xff0c;unshift方法的一个对象&＃xff0c;这些方法里就可以直接触发页面渲染函数
数组什么操作不会导致页面渲染

示例代码

// 触发更新视图
function updateView() {console.log(&＃39;视图更新&＃39;)
}// 重新定义数组原型
const oldArrayProperty &＃61; Array.prototype
// 创建新对象&＃xff0c;原型指向 oldArrayProperty &＃xff0c;再扩展新的方法不会影响原型
const arrProto &＃61; Object.create(oldArrayProperty);
[&＃39;push&＃39;, &＃39;pop&＃39;, &＃39;shift&＃39;, &＃39;unshift&＃39;, &＃39;splice&＃39;].forEach(methodName &＃61;> {arrProto[methodName] &＃61; function () {updateView() // 触发视图更新oldArrayProperty[methodName].call(this, ...arguments)// Array.prototype.push.call(this, ...arguments)}
})// 重新定义属性&＃xff0c;监听起来
function defineReactive(target, key, value) {// 深度监听observer(value)// 核心 APIObject.defineProperty(target, key, {get() {return value},set(newValue) {if (newValue !&＃61;&＃61; value) {// 深度监听observer(newValue)// 设置新值// 注意&＃xff0c;value 一直在闭包中&＃xff0c;此处设置完之后&＃xff0c;再 get 时也是会获取最新的值value &＃61; newValue// 触发更新视图updateView()}}})
}// 监听对象属性
function observer(target) {if (typeof target !&＃61;&＃61; &＃39;object&＃39; || target &＃61;&＃61;&＃61; null) {// 不是对象或数组return target}if (Array.isArray(target)) {target.__proto__ &＃61; arrProto}// 重新定义各个属性&＃xff08;for in 也可以遍历数组&＃xff09;for (let key in target) {defineReactive(target, key, target[key])}
}// 准备数据
const data &＃61; {name: &＃39;zhangsan&＃39;,age: 20,info: {address: &＃39;北京&＃39; // 需要深度监听},nums: [10, 20, 30]
}// 监听数据
observer(data)// 测试
// data.name &＃61; &＃39;lisi&＃39;
// data.age &＃61; 21
// // console.log(&＃39;age&＃39;, data.age)
// data.x &＃61; &＃39;100&＃39; // 新增属性&＃xff0c;监听不到 —— 所以有 Vue.set
// delete data.name // 删除属性&＃xff0c;监听不到 —— 所有已 Vue.delete
// data.info.address &＃61; &＃39;上海&＃39; // 深度监听
data.nums.push(4) // 监听数组