Vue响应式原理以及注意事项
响应基于 set 和 get(Object.defineProperty)
类型：
单向绑定
双向绑定
简单例子(基于Object.defineProperty)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
<form action="" class="form">
<div>
<label for="name">name</label>
<input type="text" name="name" id="name">
</div>
<div>
<label for="age">age</label>
<input type="text" name="age" id="age">
</div>
</form>
</div>
</body>
<script>
// 实现Model到View的单向绑定
//Model
let person = {
data: {
name: '',
age: '',
}
};
//ViewModel
function binding(obj) {
for (let key in obj.data) {
Object.defineProperty(obj, key, {
get() {
console.log("getter");
return obj.data.key;
},
set(value) {
console.log("setter: " + value);
let dom = document.querySelector(`#${key}`);
dom.value = value;
console.log("dom.value: " + dom.value);
obj.data.key = value;
console.log("obj.data.key: " + obj.data.key);
},
});
}
}
binding(person);
// 实现view到model的单向绑定
//View
//获取表单对象
// let form = document.querySelector(".form");
// //监听form的input事件
// form.addEventListener('input', (e) => {
// let value = e.target.value;
// let name = e.target.getAttribute('name');
// person[name] = value;
// });
</script>
</html>
分析:
1.js部分划分为数据(model)、关联视图方法viewModel
2.只需要使用binding方法，此方法就会遍历观测对象的所有key，并为key定义属性拦截器(Object.defineProperty)，在数据set、get时定义额外的处理
3.特别地，在set的时候，不仅仅更新的观测对象的的值，还更新了DOM元素的值，当然这里是做了简单处理，用以了解响应设计基础部分,详细部分的话，有兴趣可以去看看官方源码设计
4.大家可能注意到有一个部分被我注释了，那个就是那个addEventListener这部分，这里实现了view到model的单向更新
总结: vue的响应式核心是基于ES5特性Object.defineProperty生成的set、get
Vue对数组和对象的观测处理：
非根级变量响应方法：
1.数组(vue对这些数组方法进行了代理，调用时做了更新视图的处理),至于为什么，下面马上解释
检测边界：
1.增加或者修改
新增：vm.items[indexOfItem]=newValue
这种情况其实就是在为对象添加一个新key，数组本身也是Array类的一个实例
修改：vm.items[indexOfItem]=newValue按照数组本身是一个对象应该会触发更新，但是vue设计源码没有把数组对象的key进行set和get转换
2.修改长度
vm.items.length = newLength
同样这样没有set和get没法触发视图更新
另辟蹊径：
通过对原生方法进行改写来触发视图更新
1.变异方法(改变原数组)
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
2.非变异方法(返回新数组)，vue在更新视图对这种覆盖原数组的情况作了优化处理，无需担心渲染效率
filter()
contact()
slice()
检测边界的新处理方法：
1.增加元素
1.1 按顺序插入
push(value)
unshift(value)
1.2 按指定key插入
Vue.$set(arr,index,value)
2.删除元素
splice(index,count)
3.修改元素
splice(index,1,value)
2.对象(遍历data赋予set和get)
Vue.$set(target, key, value)
注意事项:被设置变量不能存在(源码发现key存在就会跳过此key的set和get转换)
增加单个属性
Vue.$set(target, key , value)
增加多个属性
Object.assign({},target,source)Vue响应式原理以及注意事项的更多相关文章
- 深度解析 Vue 响应式原理
深度解析 Vue 响应式原理 该文章内容节选自团队的开源项目 InterviewMap.项目目前内容包含了 JS.网络.浏览器相关.性能优化.安全.框架.Git.数据结构.算法等内容,无论是基础还是进 ...
- Vue源码--解读vue响应式原理
原文链接:https://geniuspeng.github.io/2018/01/05/vue-reactivity/ Vue的官方说明里有深入响应式原理这一节.在此官方也提到过: 当你把一个普通的 ...
- 详解Vue响应式原理
摘要: 搞懂Vue响应式原理! 作者:浪里行舟 原文:深入浅出Vue响应式原理 Fundebug经授权转载,版权归原作者所有. 前言 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是 ...
- vue响应式原理，去掉优化，只看核心
Vue响应式原理 作为写业务的码农,几乎不必知道原理.但是当你去找工作的时候,可是需要造原子弹的,什么都得知道一些才行.所以找工作之前可以先复习下,只要是关于vue的,必定会问响应式原理. 核心: / ...
- 深入Vue响应式原理
深入Vue.js响应式原理 一.创建一个Vue应用 new Vue({ data() { return { name: 'yjh', }; }, router, store, render: h =& ...
- vue响应式原理解析
# Vue响应式原理解析 首先定义了四个核心的js文件 - 1. observer.js 观察者函数,用来设置data的get和set函数,并且把watcher存放在dep中 - 2. watcher ...
- 浅析Vue响应式原理（三）
Vue响应式原理之defineReactive defineReactive 不论如何,最终响应式数据都要通过defineReactive来实现,实际要借助ES5新增的Object.definePro ...
- 深入解析vue响应式原理
摘要:本文主要通过结合vue官方文档及源码,对vue响应式原理进行深入分析. 1.定义 作为vue最独特的特性,响应式可以说是vue的灵魂了,表面上看就是数据发生变化后,对应的界面会重新渲染,那么响应 ...
- 浅谈vue响应式原理及发布订阅模式和观察者模式
一.Vue响应式原理 首先要了解几个概念: 数据响应式:数据模型仅仅是普通的Javascript对象,而我们修改数据时,视图会进行更新,避免了繁琐的DOM操作,提高开发效率. 双向绑定:数据改变,视图 ...
随机推荐
- C/C++ 随笔目录
[1]基础部分 (1)宏定义 <assert> <offset宏> <#pragma once> <宏定义学习> <预处理语句> <# ...
- RabbitMQ 在Windows环境下安装
1. 下载RabbitMQ和Erlang RabbitMQ下载地址 https://www.rabbitmq.com/install-windows.html RabbitMQ是用Erlang编程语 ...
- 百度前端技术学院-task1.4源代码
任务描述 实现如 示例图(点击打开) 的效果 灰色元素水平垂直居中,有两个四分之一圆位于其左上角和右下角. 任务注意事项 思考不同情况下(如灰色高度是根据内容动态变化的)水平垂直居中的解决方案. 动手 ...
- docke通信之Linux 网络命名空间
一.前言 namespace(命名空间)和cgroup是软件容器化(想想Docker)趋势中的两个主要内核技术.简单来说,cgroup是一种对进程进行统一的资源监控和限制,它控制着你可以使用多少系统资 ...
- c# 类实例序列化反序列化json文件 （原发布 csdn 2017-10-01 20:02:12）
前言 前段时间使用了net.json保存对象数据.添加完成后,测试发现300多实例数据保存加载json文件,速度比原方式(BinaryFormatter)慢.但是功能加上后也懒再删掉代码了,索性就采用 ...
- PIE SDK缓冲区分析算法
1.算法功能简介 缓冲区分析是指有点.线.面实体为基础,自动建立其周围一定宽度范围内的缓冲区多边形图层,然后建立该图层与目标图层的叠加,进行分析而得到的所需的结果.他是用来解决邻近度问题的控件分析工具 ...
- 线程---Day22
并发与并行 并发:指两个或多个事件在同一个时间段内发生. 并行:指两个或多个事件在同一时刻发生(同时发生) 在操作系统中,安装了多个程序,并发指的是在一段时间内宏观上有多个程序同时运行,这在单CPU系 ...
- BUAA-OO-2019 第四单元总结
UML作业架构设计 这一单元的作业本质上是对数据之间的联系进行解析,并重新建立数据结构以方便查询的工作,这就要求我们了解各种UmlElement的结构以及他们之间的关系是如何组织的. 第十三次作业 在 ...
- 了解MySQL
目前流行的数据库 MySQL Oracle Microsoft SQLServer Microsoft Access PostgreSQL DB2/UDB InfoMax MySQL介绍 世界上最流行 ...
- css1.0~3.0背景图使用多张折叠的概念与方法
需求:使用多张图片作为页面的背景图: 首先需要了解background的属性以及细节知识:https://www.cnblogs.com/chenglj/p/7372996.html backgrou ...