本篇文章给大家谈谈vue2添加响应式数据，以及vue30响应式原理对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
本文目录一览：
vue2 v-model—绑定事件—深度响应式
在表单标签中，v-model双向绑定的用法有所区别。
首先在data中定义好数据：
在默认情况下，v-model在每次input 事件触发后将输入框的值与数据进行同步(除了上述输入法组合文字时)。可以添加lazy 修饰符,从而转为在change事件之后进行同步:
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符,因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
v-on:指令用来绑定事件，简写为 @ 可以指定一个事件方法，事件方法要在methods里面定义。
指定事件方法时，如果没有给方法传递参数，默认会传递一个事件对象参数
如果我们传递了一个参数，还想再传递事件对象参数，就要通过$event关键字设置：
如果事件处理的逻辑比较简单，可以直接在行内编写：
在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符：
为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：
Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。
对于已经创建的实例，Vue 不允许动态添加根级别的响应式 property。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property。例如：
您还可以使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名：
用delete方法，删除指定对象的属性或数组的成员
您还可以使用 vm.$delete实例方法，这也是全局 Vue.delete方法的别名：
// 针对数组，只能通过以下方法，才能实现响应式：push() pop() unshift() shift() splice() reverse() sort()
如果不使用以上方法，那么也可以使用set和delete方法
Vue基础-响应式原理
vue可以监听一个变量的变化，当变量发生变化时，vue可以做一些工作
问的是vue如何监听data选项上的变化的
vue2中，使用Object.defineProperty来实现响应式
给对象添加属性时，可以为属性添加getter/setter的钩子。当这个属性被访问时，get钩子会执行；当修改这个属性时，set钩子会执行，这就实现了响应
vue组件实例化：对data选项上的数据进行劫持
初始化：init()把那些响应式变量渲染到DOM上
观察者：Watcher()触发依赖收集异步执行、更新DOM；
dep：收集依赖；
vue2响应式原理总结
vue组件实例化时，会对data属性深度遍历（遇到数组或者对象）为每一个属性添加数据劫持。数据劫持就是使用Object.defineProperty（de fai in pro pu tei）方法添加get/set方法。
在这个过程中会实例化一个Dep类。
1.在get拦截器里触发dep实例的depend方法,进行依赖收集，实质是在dep的实例属性sub数组中添加依赖这个属性的watcher实例。
2.在set拦截器里触发dep实例的notify方法，对收集到的所有依赖派发更新，（watcher的update方法）
vue组件实例化时会实例化一个渲染watcher,渲染watcher实例化过程会做两件事情。
1.创建vnode,在这个过程中，访问了data属性，触发了get方法，完成了依赖收集。
2.触发了子组件的实例化，子组件实例化又会重复上述数据劫持的过程。
这个过程就是对组件树的深度遍历。
结合组件生命周期来看整个过程，父组件会先触发created钩子，子组件后触发created钩子。而子组件mouted钩子会先执行，父组件的mouted钩子后执行。
分步骤记忆
1、实现页面不刷新的原理
2、页面视图刷新的原理
实现页面不刷新
1.hash
2.history
3.abstract：支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。
1.hash(哈希模式)，#符号后边是浏览器行为，在改变的时候不对页面进行刷新（重新请求URL）（监听hashChange事件）
2.history模式，H5新增了pushState，replaceState连个新API,可以修改历史记录却不会使浏览器刷新页面。
视图更新原理
其原理就是vue的响应式更新dom的原理，m = v
m是数据，也就是在vue-router install时在根组件（root vue component）添加了_route属性，在匹配到对应路由后更新了_route属性值，继而触发了该属性值的渲染watcher,在继而触发dom更新。
两种模式的不同
1.部署时，history模式需要服务端处理所有可能的路径（例如配置nginx的配置文件），防止出现404。哈希模式则不需要。
2.URL表示不同。
v-model指令就是 v-bind:value 和 @input 的语法糖。
它即可以支持原生表单元素，也可以支持自定义组件
在自定义组件中其实际是这样的：
它的实现通过自定义render函数, 缓存了 vnode
Vue 在更新 DOM 时是异步执行的，只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。
如果同一个 watcher 被多次触发，只会被推入到队列中一次。在缓冲时会去除重复数据避免不必要的计算和 DOM 操作。
$nextTick(cb) 目的是在DOM 更新完成后传入的回调函数再被调用。
vue数组和对象的响应式实现
数组:
通过经过vue二次封装的push,unshift,pop,shift,sort,reverse,splice可以实现数组中数据的响应式，通过索引增删改查vue是不响应的。或者使用vue.set()/vm.$set()
对象:
通过vue.set()/vm.$set()
vue2.x使用响应式vw布局(px自动转为vw)
浏览器支持一览
1、依赖包引入
yarn add postcss-px-to-viewport-opt postcss-viewport-units cssnano cssnano-preset-advanced --dev
2、更改项目根目录下.postcssrc.js文件配置
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
"autoprefixer": {},
"postcss-px-to-viewport-opt": {
viewportWidth: 750,// 设计稿宽度
viewportHeight: 1334,// 设计稿高度，可以不指定
unitPrecision: 3,// px to vw无法整除时，保留几位小数
viewportUnit: 'vw',// 转换成vw单位
selectorBlackList: ['.ignore', '.hairlines'],// 不转换的类名
minPixelValue: 1,// 小于1px不转换
mediaQuery: false, // 允许媒体查询中转换
exclude: /(\/|\\)(node_modules)(\/|\\)/ // 排除node_modules文件中第三方css文件
},
"postcss-viewport-units":{},
"cssnano": {
preset: "advanced",
autoprefixer: false,// 和cssnext同样具有autoprefixer，保留一个
"postcss-zindex": false
}
}
}
3、添加全局样式消除img被插件的影响
img {
content: normal !important;
}
关于vue2添加响应式数据和vue30响应式原理的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
2、本站永久网址：https://www.yuanmacun.com
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
源码村资源网 » vue2添加响应式数据（vue30响应式原理）
1 评论