怎样使用ES6的class模仿Vue写一个双向绑定

Vue 数据双向绑定主要是指：数据变化更新视图，视图变化更新数据 实现原理：采用数据监听、解析结合订阅者模式的方式，通过Object.defineProperty()来监听各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。从而实现数据的双向绑定 Vue 主要通过以下 4 个步骤来实现数据双向绑定的： 1、实现一个监听器 Observer：对数据对象进行遍历，包括子属性对象的属性，利用 Object.defineProperty() 对属性都加上 setter 和 getter。这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。 2、实现一个解析器 Compile：解析 Vue 模板指令，将模板中的变量都替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，调用更新函数进行数据更新。 3、实现一个订阅者 Watcher：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁 ，主要的任务是订阅 Observer 中的属性值变化的消息，当收到属性值变化的消息时，触发解析器 Compile 中对应的更新函数。 4、实现一个订阅器 Dep：订阅器采用 发布-订阅 设计模式，用来收集订阅者 Watcher，对监听器 Observer 和 订阅者 Watcher 进行统一管理。

Map对象的连接运算符也是将两个Map对象连接成一个新的Map对象,Map对象的连接运算符是+,如果两个Map对象具有相同的key,则右边的值替代左边的值.看如下的例子: <#assign scores = {"语文":86,"数学":78} + {"数学":87,"Java":93}> 语文成绩是${scores.语文} 数学成绩是${scores.数学} Java成绩是${scores.Java} 输出结果是: 语文成绩是86 数学成绩是87 Java成绩是93

具体步骤： 第一步： 需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter 这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化 2、自身必须有一个update()方法 3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。 第四步： MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。 1、v-model是什么?怎么使用? vue中标签怎么绑定事件? 答：可以实现双向绑定，指令(v-class、v-for、v-if、v-show、v-on)。vue的model层的data属性。绑定事件：

在vue中进行数据绑定后,当数据修改了会直接更新到视图上但是在小程序中呢,data数据修改是不会直接同步到,必须调用this.setData()这个方法例如:data:{arr:[{name:"小李"},{name:"小王八"}],list:[{name:"小明"},{name:"小红"}]},setMsg(){ //该方法可以绑定到事件上也可以在onLoad里面调用this.data.arr = this.data.list this.setData({arr:this.data.arr, // 简单粗暴直接修改["list[0].name"]:"小姚" //也可以只修改里面的一项,})}

镇三山大闹青州道霹雳火夜走瓦砾场第35回

vue.js 采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。 首先我们为每个vue属性用Object.defineProperty()实现数据劫持，在监听数据的过程中，为每个属性分配一个订阅者集合的管理数组dep；然后在编译的时候在该属性的数组dep中添加订阅者 watcher，v-model会添加一个订阅者，{{}}也会，v-bind也会，只要用到该属性的指令理论上都会，接着为input会添加监听事件，修改值就会为该属性赋值，触发该属性的set方法，在set方法内通知订阅者数组dep，订阅者数组循环调用各订阅者的update方法更新视图。 实现步骤：修改输入框内容 => 在事件回调函数中修改属性值 => 触发属性的 set 方法=>发出通知 dep.notify() => 触发订阅者的 update 方法 => 更新视图。 流程图 ： 在实例化一个Vue对象的时候，会传进去一个data对象，之后分成两个进程，一个进程是对挂载目标元素模板里的v-model和{{ }}；两个指令进行编译。另一个进程是对传进去的data对象里面的数据进行监听。 上图中，observe是利用Object.defineProperty()对传入的data对象进行数据监听，在数据改变的时候触发该属性的set方法，更新该属性的值，并发布消息，我（该属性）的值变了。 compile是编译器，找到vue的指令v-model所在的元素，将data中该属性的值赋给元素的value，并给这个元素添加二级监听器，在元素的值改变的时候，将新值赋给data里面同名属性，这个时候就完成了单向数据绑定，视图 >> 模型。 那么最终的由模型到视图的更新，依赖于dep和watcher，dep会收集订阅者，就是绑定了data里面属性的元素，在数据更新的时候，会触发该属性的set方法，在set里触发该属性的消息发布通知函数。而Watcher根据收到的数据变化通知，更新相应的数据。 dep这个东东给大家解释一下，就是data里的每个属性都有一个dep对象，dep对象里可以有很多订阅者（watcher），但是只有一个添加订阅者的方法和一个发布变化通知的方法，就是模板上可以有多处元素绑定data里的同一个属性值，所以dep是依赖于data里面的属性的。 而Watcher是每个{{ }}有一个，初次编译的时候，会在new的时候自动更新一下模板的数据，等到下次数据改变的时候，由dep通知数据更新，直接调用watcher的update方法，更新模板的绑定数据。 observer 模块共分为这几个部分： 示意图如下： Observer的构造函数 value是需要被观察的数据对象，在构造函数中，会给value增加 ob 属性，作为数据已经被Observer观察的标志。如果value是数组，就使用observeArray遍历value，对value中每一个元素调用observe分别进行观察。如果value是对象，则使用walk遍历value上每个key，对每个key调用defineReactive来获得该key的set/get控制权。 Dep是Observer与Watcher之间的纽带，也可以认为Dep是服务于Observer的订阅系统。Watcher订阅某个Observer的Dep，当Observer观察的数据发生变化时，通过Dep通知各个已经订阅的Watcher。 Watcher是用来订阅数据的变化的并执行相应操作（例如更新视图）的。Watcher的构造器函数定义如下： 参数中，vm表示组件实例，expOrFn表示要订阅的数据字段（字符串表示，例如a.b.c）或是一个要执行的函数，cb表示watcher运行后的回调函数，options是选项对象，包含deep、user、lazy等配置。 Object.defineProperty(obj, prop, descriptor) ，这个语法内有三个参数，分别为 obj （要定义属性的对象） prop （要定义或修改的属性的名称或 Symbol ） descriptor （要定义或修改的属性描述符=>具体的改变方法） 简单地说，就是用这个方法来定义一个值。当调用时我们使用了它里面的get方法，当我们给这个属性赋值时，又用到了它里面的set方法； 主要解释第三个参数 { value: 设置属性的值 writable: 值是否可以重写。true | false enumerable: 目标属性是否可以被枚举。true | false (就是能不能被遍历出来) configurable: 目标属性是否可以被删除或是否可以再次修改特性 true | false set: 目标属性设置值的方法 get：目标属性获取值的方法 } set 是一个函数，接收一个新值，会在值被重写或修改的时候触发这个函数 get 是一个函数，返回一个值，会在属性被调用的时候触发。 注 ： Object.defineProperty()详解 Object.defineProperty()官方文档 已经了解到vue是通过数据劫持的方式来做数据绑定的，其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持，那么在设置或者获取的时候我们就可以在get或者set方法里假如其他的触发函数，达到监听数据变动的目的。 我们知道通过Object.defineProperty()可以实现数据劫持，它的属性在赋值的时候触发set方法， 当然要是这么粗暴，肯定不行，性能会出很多的问题。 observer用来实现对每个vue中的data中定义的属性循环用Object.defineProperty()实现数据劫持，以便利用其中的setter和getter，然后通知订阅者，订阅者会触发它的update方法，对视图进行更新。 为什么要订阅者 ：在vue中v-model，v-name，{{}}等都可以对数据进行显示，也就是说假如一个属性都通过这三个指令了，那么每当这个属性改变的时候，相应的这个三个指令的html视图也必须改变，于是vue中就是每当有这样的可能用到双向绑定的指令，就在一个Dep中增加一个订阅者，其订阅者只是更新自己的指令对应的数据，也就是v-model="name"和{{name}}有两个对应的订阅者，各自管理自己的地方。每当属性的set方法触发，就循环更新Dep中的订阅者。 订阅发布模式（又称观察者模式）定义了一种一对多的关系，让多个观察者同时监听某一个主题对象，这个主题对象的状态发生改变时就会通知所有观察者对象。 发布者发出通知 => 主题对象收到通知并推送给订阅者 => 订阅者执行相应操作 举个例子： 2.实现compile： compile的目的就是解析各种指令称真正的html。 这样一来就实现了vue的数据双向绑定。 参考链接： 理解VUE双向数据绑定原理和实现---赵佳乐 Vue的双向数据绑定原理 vue双向绑定原理分析 Vue原理解析之observer模块 深入响应式原理

https://my.oschina.net/u/4386652/blog/4281447 双向绑定： 数据变化更新视图 view => model 利用Object.defineProperty的get、set函数对数据更改、读取进行监听。如果数据改变就通知watcher进行重新渲染页面 视图变化更新数据 model => view 利用事件监听，通过target.value拿到新值赋值给data 数据变化更新视图关键在于 如何知道数据发生了变化，数据变化了通知视图进行更新 让数据变得能监测，需要使用Object.defineProperty中的get、set函数 let car = {} let val = 3000 Object.defineProperty(car, "price", { get(){ console.log("price属性被读取了") return val }, set(newVal){ console.log("price属性被修改了") val = newVal } }) car.price = 4000 设置属性值会进入set方法 console.log(car.price) 读取属性值会进入get方法 Object.defineProperty通过对数据读取和设置进入的get、set函数对数据进行了监听 响应式原理： 每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。 思考： get函数好像意义不大 发布者、订阅者不能很好理解

Vue 的双向绑定是指数据变化能引起界面的变化，界面数据的变化也能驱动数据的改变。 这个功能其实和单向数据流规范不一样，所以开始接触 Vue 的时候非常吸引我的一个功能。我们发现 Element UI 的表单也有大量使用 v-model 进行双向绑定。 双向绑定 其实 不是所有的 元素/组件 都支持的，目前 Vue 支持 input ， select , checkbox , radio 和组件 利用 v-model 指令进行 双向绑定。 我以前对 双向绑定 这个功能有很大的一个疑惑：就是 双向绑定 为什么不会造成更新死循环？即 界面变化 -> 数据变化 -> 界面变化 -> 数据变化 -> ... 由于不同的表单元素使用的内部指令是不一样的，我们就用 input 作为例子进行分析，其他的表单元素的双向绑定原理非常类似。 这一节涉及到 指令 和 事件处理 相关的知识点，如果不是太清楚的话，建议参阅我前面的两篇相关内容，否则有可能会有一些的疑惑。 input 输入数据 -> 数据处理 -> 调用 onUpdate:modelValue 对应的 $event => (inputValue = $event) 方法 -> 响应式数据变化触发组件更新 -> input 设置新值 input.value = newValue 更新至此终止 。 指令的更新有两个方法： beforeUpdate 和 updated 。 在 beforeUpdate 中执行有两个优势： 其实等同于:

Vue.js 3.0的一些新特性 ，其中一个很重要的改变就是Vue3 将使用 ES6的Proxy 作为其观察者机制，取代之前使用的Object.defineProperty。 总结来说Object.defineProperty方法存在一定的局限性 基本用法： Proxy 一共 支持13 种的拦截,相对Object.defineProperty更加丰富。 简单Demo Vue3.0的一个主要点就是数据劫持的实现变更，其他的与Vue2.0大致相同，可参照 Vue双向绑定原理 详细了解一下。 参考： ECMAScript 6 入门-阮一峰-Proxy章节

vue将数据绑定到组件的原理如下：1、当实例化一个Vue构造函数，会执行 Vue 的 init 方法，在 init 方法中主要执行三部分内容，一是初始化环境变量，而是处理 Vue 组件数据，三是解析挂载组件。以上三部分内容构成了 Vue 的整个执行过程。2、Vue 实现了一个 观察者-消费者(订阅者) 模式来实现数据驱动视图。通过设定对象属性的 setter/getter 方法来监听数据的变化，而每个属性的 setter 方法就是一个观察者， 当属性变化将会向订阅者发送消息，从而驱动视图更新。3、Vue 的订阅者 watcher 实现在 /src/watchr.js 。构建一个 watcher 最重要的是 expOrFn 和 cb 两个参数，cb 是订阅者收到消息后需要执行的回调，一般来说这个回调都是视图指令的更新方法，从而达到视图的更新，但是这也不是必须的，订阅回调也可以是一个和任何无关的纯函数。一个订阅者最重要的是要知道自己订阅了什么，watcher 分析 expOrFn 的 getter 方法，从而间接获得订阅的对象属性。4、Vue 双向数据绑定实现数据与视图的绑定与同步，最终体现在对数据的读写处理过程中，也就是 Object.defineProperty() 定义的数据 set、get 函数中。Vue 中对于的函数为 defineReactive，在精简版实现中，我只保留了一些基本特性：function defineReactive(obj, key, value) { var dep = new Dep() Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reactiveGetter() { if (Dep.target) { dep.depend() } return value }, set: function reactiveSetter(newVal) { if (value === newVal) { return } else { value = newVal dep.notify() } } })}在对数据进行读取时，如果当前有 Watcher（对数据的观察者吧，watcher 会负责将获取的新数据发送给视图），那将该 Watcher 绑定到当前的数据上（dep.depend()，dep 关联当前数据和所有的 watcher 的依赖关系），是一个检查并记录依赖的过程。而在对数据进行赋值时，如果数据发生改变，则通知所有的 watcher（借助 dep.notify()）。这样，即便是我们手动改变了数据，框架也能够自动将数据同步到视图。

v-model的原理简单描述v-model主要提供了两个功能，view层输入值影响data的属性值，data属性值发生改变会更新view层的数值变化。其核心就是，一方面modal层通过defineProperty来劫持每个属性，一旦监听到变化通过相关的页面元素更新。另一方面通过编译模板文件，为控件的v-model绑定input事件，从而页面输入能实时更新相关data属性值。v-model是什么v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。为什么使用v-modelv-model作为双向绑定指令也是vue两大核心功能之一，使用非常方便，提高前端开发效率。在view层，model层相互需要数据交互，即可使用v-model。

1. 在组件内的data对象中创建一个props属性的副本因为result不可写，所以需要在data中创建一个副本myResult变量，初始值为props属性result的值，同时在组件内所有需要调用props的地方调用这个data对象myResult。Vue.component("switchbtn", {template: "<div @click="change">{{myResult?"开":"关"}}</div>",props: ["result"],data: function () {return {myResult: this.result//data中新增字段};},......});2. 创建针对props属性的watch来同步组件外对props的修改此时在组件外（父组件）修改了组件的props，会同步到组件内对应的props上，但是不会同步到你刚刚在data对象中创建的那个副本上，所以需要再创建一个针对props属性result的watch（监听），当props修改后对应data中的副本myResult也要同步数据。Vue.component("switchbtn", {template: "<div @click="change">{{myResult?"开":"关"}}</div>",props: ["result"],data: function () {return {myResult: this.result};},watch: {result(val) {this.myResult = val;//新增result的watch，监听变更并同步到myResult上}},......3. 创建针对props副本的watch，通知到组件外此时在组件内修改了props的副本myResult，组件外不知道组件内的props状态，所以需要再创建一个针对props副本myResult，即对应data属性的watch。在组件内向外层（父组件）发送通知，通知组件内属性变更，然后由外层（父组件）自己来变更他的数据最终全部代码：<div id="app"><switchbtn :result="result" @on-result-change="onResultChange"></switchbtn><input type="button" value="change" @click="change"></div>Vue.component("switchbtn", {template: "<div @click="change">{{myResult?"开":"关"}}</div>",props: ["result"],data: function () {return {myResult: this.result//①创建props属性result的副本--myResult};},watch: {result(val) {this.myResult = val;//②监听外部对props属性result的变更，并同步到组件内的data属性myResult中},myResult(val){//xxcanghai 小小this.$emit("on-result-change",val);//③组件内对myResult变更后向外部发送事件通知}},methods: {change() {this.myResult = !this.myResult;}}});new Vue({el: "#app",data: {result: true},methods: {change() {this.result = !this.result;},onResultChange(val){this.result=val;//④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中}}});至此，实现了组件内数据与组件外的数据的双向绑定，组件内外数据的同步。最后归结为一句话就是：组件内部自己变了告诉外部，外部决定要不要变。

前言：由于在Vue2.x中，我们使用的v-model只能双向绑定一个值，在某些需求面前显的力不从心。但是在Vue3.x中已经可以实现啦！ 1、概述：数据双向绑定 2、回顾：在Vue2.x中，v-model进行数据双向绑定（语法糖）的原理 且在Vue2.x中不能够绑定多个v-model 3、用例：Vue3.x重写了v-model的实现方式，以适用用绑定多个v-model ①：单个数据实现数据双向绑定 ②：多个数据实现数据双向绑定 下一章： （十三）Vue3.x中的emits选项 上一章： （十一）template和ref获取元素或组件实例 ps： 看清现实！人在生前是平等的，人在死后亦是平等，唯独人在出生后就不平等了。

一、vue2.0的双向绑定是怎么实现的 2、observer，compile，watcher （1）observe是一个数据监听器，核心方法是Object.defineProperty （3）compile是一个指令解析器，对需要监听的节点和属性进行扫描和解析。 3、此模式的优点：不需要显式调用，可以直接通知变化，更新视图；劫持了属性setter，不需要额外的diff操作 4、Object.defineProperty缺点 （1）不能监听数组 （2）不能监听整个对象，只能监听属性 （3）不能监听属性的增删，只能监听变化 5、3.0版本使用Proxy （1）可以监听数组 （2）可直接监听整个对象，不用层层递归属性 （3）get和set时候直接有参数，不需要单独存储变量 （4）new Proxy()会返回一个新对象，不会污染源对象。 二、数据不更新的问题 1、更新的原理：在数据读取时收集依赖，在赋值时通知依赖更新。 2、object有defineProperty方法，通过getter，setter只监听了属性的读取和赋值，但是新增属性和删除属性没有检测，所以专门提供了$set和$delete来实现 3、array，没有defineProperty方法，没有setter，通过get和新建数组方法拦截器修改原生方法push,pop,shift,unshift,splice,sort,reserve来实现监听，而通过修改数组下标操作数组的不会被检测，所以专门提供了$set和$delete来实现 4、$set(target, key, value)和$delete(target, propertyName/index)方法原理 （1）判断target是否是undefined，null，或者原始类型,或者vue实例，或者vue实例的跟数据对象 （2）target为数组，则还是通过调用splice操作索引更新数据 （3）target为对象，且为响应式，则调用defineReactive操作数据 （4）更新完数据后通知依赖更新 三、computed和watch和methods 1、computed （1）设计初衷：为了使模板中的逻辑运算更简单 （2）适用于数据被重复使用或者计算复杂费时的场景；依赖其他数据的场景 （3）读取缓存，依赖不变，则不需重新计算。（根据dirty标志判断） 2、watch是对数据的监听回调 3、computed和watch的区别 相同点：都会观察页面的数据变化 不同点：（1）computed是读取缓存，watch每次都要重新执行； （2）watch更适合数据变化时的异步操作和开销较大的操作。 4、computed和methods的区别 computed依赖缓存，可以定义getter和setter，但是methods不行 四、vue-router的模式区别 1、abstract：非浏览器环境下使用 2、hash： （1）默认。监听hashchange实现。 （2）有点，兼容性好，ie8支持 （3）缺点：看起来奇怪 3、history： （1）h5新增的。允许开发者直接修改前端路由而不重新触发请求页面 （2）实现原理：监听popstate事件。能监听到用户点击浏览器的前进后退事件或者手动调用go，back，forward事件；不能监听到pushState和replaceState事件。 （3）为了避免浏览器刷新出现的404页面，需要在服务端配置兼容。 （4）如果浏览器不支持，会降级到hash模式 * 通过vue.use插件机制和vue.mixin将store在beforeCreate和destroyed生命周期进行混入。 五、vuex解决了什么问题 1、vuex解决了vue项目中的数据状态管理问题 2、是组件通信的一种方式。 3、原理：创建了单一的状态树，包含state，mutation，action，getter，module。 4、view(dispatch)action(commit)mutation(mutate)state(render)view 5、通过vue的data和computed，让state变成响应式， 6、通过vue.use插件机制和vue.mixin将store在beforeCreate生命周期进行混入。 六、nextTick是怎么是实现的 1、作用：将回调延迟到下次DOM更新循环之后执行 2、原因：VUE在更新DOM时是异步的，vue检测到数据变化后，不会立即更新DOM，而是会开启一个事件队列，并缓冲同一时间循环中的所有数据变更，在下一次tick中，执行更新DOM。 3、js的运行机制：js是单线程的，基于事件循环，有宏任务和微任务。 4、内部原理： （1）能力检测：Promise.then(微), MutationObserve(微)，setImmediate(微),setTimeout(宏) （2）将回调函数推入回调队列，锁上易步锁，执行回调。 七、keep-alive内置组件和LRU算法（队列） 1、自身不会渲染成DOM，没有常规的 标签，是个函数组件，被他包裹的组件，切换时会被缓存在内存中，而不是销毁。 （1）可以有条件的缓存:include（匹配到的缓存）,exclude（匹配到的不缓存）,max(最多可以缓存多少组件实例) 2、原理：内部维护了this.cache（缓存的组件对象）和this.keys（this.cache中的key），运用LRU策略。 （1）命中了缓存的组件要调整组件key的顺序。 （2）缓存的组件数量如果超过this.max时，要删除第一个缓存组件。 （3）LRU(Least recently used，最近最少使用)：根据数据的 历史 访问记录来进行淘汰数据。“如果数据最近被访问过，那么将来被访问的几率也更高。” 3、生命周期钩子：activated和deactivated，被keep-alive包括的组件激活和停用时调用。先停用组件的deactivated，再激活组件的activated

MVVM框架主要包含3个部分: model 、 view 和 viewmodel 。 简单的来说，就是框架的控制器层（这里的控制器层是一个泛指，可以理解为控制view行为和联系model层的中间件）和UI展示层（view层）建立一个双向的数据通道。当这两层中的任何一方发生变化时，另一层将会自动作出相应的变化。 一般来说要实现这种双向数据绑定，在前端我目前了解的有三种形式： 目前angular,regular的实现都是基于脏检查。当发生某些特定的事情的时候，框架会调用相关的digest方法。内部逻辑就是遍历所有的 watcher ,对监控的属性做对比。如果值发生了变化，则执行相应的 handler 。 当系统进入脏检查阶段，遍历所有的 $watch 绑定的 watcher ,然后对比 watcher.get() 与 watcher.last ,如果不同则运行对应的 watcher.fn(newvalue, oldvalue) 。然后再进入下一个watcher的检查。 何时进行脏检查？ 由于regularjs是基于脏检查，所以当不是由regularjs本身控制的操作(如事件、指令)引起的数据操作，可能需要你手动的去同步data与view的数据. $update方法即帮助将你的data同步到view层. ]( https://regularjs.github.io/reference?syntax-zh#bind-once )元素来控制你的观察者数量。 使用ES7中的 Object.observe 方法对对象（或者其属性）进行监控观察，一旦其发生变化时，将会执行相应的handler。这是目前监控属性数据变更最完美的一种方法，语言（浏览器）原生支持，没有什么比这个更好了。唯一的遗憾就是目前支持广度还不行，有待全面推广。 vue.js和avalon.js实现数据双向绑定的原理就是属性访问器。 它使用了ES5中的定义标准属性的Object.defineProperty 方法。 Object.defineProperty 使用示例： 首先，vuejs在实例化的过程中，会对遍历传给实例化对象选项中的data 选项，遍历其所有属性并使用 Object.defineProperty 把这些属性全部转为 getter/setter。 同时每一个实例对象都有一个watcher实例对象，他会在模板编译的过程中,用getter去访问data的属性，watcher此时就会把用到的data属性记为依赖，这样就建立了视图与数据之间的联系。当之后我们渲染视图的数据依赖发生改变（即数据的setter被调用）的时候，watcher会对比前后两个的数值是否发生变化，然后确定是否通知视图进行重新渲染。这样就实现了所谓的双向数据绑定。

当一个vue实例加载时，会进行初始化，将他的配置项options和mixins的内容合并，以options为主，而在初始化data时，会对data对象进行数据劫持，并做代理，通过Object。definproperty劫持数据后vue会查找当前属性有无依赖项既被watch，或者依赖当前属性的值，如果有，就会注册依赖既deps，而注册deps时会在wather内添加新的更新目标。当数据发生变更时，会触发deps的更新方法，调用所有的watcher，watcher又会触发对应deps的更新，直到所有依赖项更新完毕。扩展资料：Vue 是一个 MVVM框架，核心是双向数据绑定，VM（视图模型）是作为V（视图）和M（模型）的桥梁。对Vue响应式（双向数据绑定）的理解，如果错误尽请指出，一起交流，共同进步。Vue响应式原理核心是 数据劫持，采用 ES5 的 object.defineproperty 的 getter 和 setter 方法。Vue.js 最显著的一个功能是响应系统 —— 模型只是普通对象，修改它则更新视图。这让状态管理非常简单且直观，不过理解它的原理也很重要，可以避免一些常见问题。下面我们开始深挖 Vue.js 响应系统的底层细节。参考资料来源：百度百科-Vue·js前端开发技术

当一个vue实例加载时，会进行初始化，将他的配置项options和mixins的内容合并，以options为主，而在初始化data时，会对data对象进行数据劫持，并做代理，通过Object.definproperty劫持数据后vue会查找当前属性有无依赖项既被watch，或者依赖当前属性的值，如果有，就会注册依赖既deps,而注册deps时会在wather内添加新的更新目标。当数据发生变更时，会触发deps的更新方法，调用所有的watcher,watcher又会触发对应deps的更新，直到所有依赖项更新完毕。

vue响应式基本原理是基于Object.defineProperty(obj，prop，descriptor)，descriptor里面可以定义get和set方法，可以在获取属性值事触发get方法（可以收集依赖），设置属性值时触发set方法（更新依赖）。Vue最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的JavaScript对象。而当你修改它们时，视图会进行更新。vue响应式系统vue作为一个前端框架，近两年非常的火，虽然它的社区不像react那样繁荣，但它配套的东西都有固定的团队维护，用起来更方便。它是MVVM模型的框架（不熟悉框架模型的同学可以看看阮一峰大神的博客，或者点这里），实现数据的双向绑定，与其他框架相比vue非常的轻量级，另一个重要的特点就是它的响应式系统。

一，先创建一个叫eventbus的vue对象，什么配置都不需要，就只是拿来做一个event bus而已。第二，因为组件的props不允许更改，所以呢要用另一个变量来作为中转，也就是呢，组件不能用functional为true了。然后组件里头定义了个currentValue，绑定在props定义的value，这样：data: function() { return { currentValue: this.value }}第三，组件里头添加watch属性，监听value和currentValue的变化，这样：watch: { value: function(newValue, oldValue) { this.currentValue = newValue; //这里有点诡异，最后说document.getElementById(inputId).value=this.currentValue; }, currentValue: function(newValue){ eventbus.$emit("model-change", this.modelName, newValue); }}这里，还需要在props里头加一个modelName的字段给组件标签绑定，后面有用呢。。第四，在input标签里头要绑个input的事件，这样：var that = this;createElement("input", { //... "on": { "input": function(event){ that.currentValue = event.target.value; } }})第五，绑定这个标签的Vue对象里头，要加个created的钩子，绑个model-change的事件，这样：created: function() { var that = this; eventbus.$on("model-change", function(modelName, modelValue) { Vue.set(that.$data, modelName, modelValue); });}最终，标签变成了这样：<my-component :value="user.name" model-name="user.name"></my-component>user.name的默认值是Mary，渲染出来的时候也是显示Mary，敲键盘改值改成xxx，控制台里头看一下，user.name也变成了xxx了，在控制台里头将user.name改成abc，框里头也变成abc了。终于可以双向绑定了。

加个v-key试试每一个v-for循环渲染都建议绑定一个v-key，key在你这里可以是数组索引，比如说(item,index) in list ,v-key就是 :key="index",key的目的是给当前数据一个唯一标识，这样数据更新时vue就知道是哪条数据更新了移除当前行就是在每一行加个按钮，绑定上删除方法，比如说deleteData(index)，传入的参数是当前的数组索引index，然后在这个方法里获取index,再把对应数据删掉就行

结果： Vue中使用v-model指令来实现表单元素和数据的双向绑定。监听用户的输入，然后更新数据。 v-model本质上是个语法糖，其实现原理包含两个步骤 v-on:input="" 用于动态监听用户输入的信息，在界面上产生一个事件后，浏览器会生成一个event对象，这个event对象就包含了输入的信息 除了上面的文本类型，v-model还能结合其他类型使用 结果： 结果： 结果： 结果： v-model在默认情况下同步了输入框的数据，就是说输入框数据一有改变，对应的data中的数据就会自动发生改变。 lazy 修饰符可以让数据在失去焦点之后才更新 默认情况下，输入框得到的数据最后都会变成字符串形式。 number 修饰符可以将输入框得到的内容转为数字类型。 trim 修饰符可以去掉从输入框获取的内容的左右两边的空格

Model 层: 对应数据层的域模型，它主要做域模型的同步 。在层间关系u2fa5，它主要u2f64于抽象出 ViewModel 中视图的 Model。 View 层: 作为视图模板存在 ，在 MVVM u2fa5，整个 View 是u2f00个动态模板。 除了定义结构、布局外，它展示的是 ViewModel 层的数据和状态 。View 层不负责处理状态，View 层做的是 数据绑定的声明、 指令的声明、 事件绑定的声 明。 ViewModel 层: 把 View 需要的层数据暴露，并对 View 层的 数据绑定声明、 指令声明、 事件绑定声明 负责，也就是处 理 View 层的具体业务逻辑。 ViewModel 底层会做好绑定属性的监听。当 ViewModel 中数据变化，View 层会得到更新；u2f7d当 View 中声明了数据的双向绑定（通常是表单元素），框架也会监听 View 层（表单）值的变化。u2f00旦值变 化，View 层绑定的 ViewModel 中的数据也会得到u2f83动更新。 优点: Model变化和修改，u2f00个ViewModel可以绑定不同的"View"上，当View变化的时候Model不可以不变，当Model变化 的时候View也可以不变。你可以把u2f00些视图逻辑放在u2f00个ViewModelu2fa5u2faf，让很多view重u2f64这段视图逻辑 缺点: Vue 实例有u2f00个完整的u2f63命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等u2f00系列过程 官u2f45实例的异步请求是在mountedu2f63命周期中调u2f64的，u2f7d实际上也可以在createdu2f63命周期中调u2f64。 https://juejin.im/post/5d267dcdf265da1b957081a3 computed用于计算属性，只有它依赖的值改变才会触发，且这个值有缓存 watch用于监听一个属性的变化，属性变化就会触发 computed: u2f29结: 简单版：利u2f64 Object.defineProperty 劫持对象的访问器,在属性值发u2f63变化时我们可以获取变化,然后根据变化进u2f8f后续响应,在 vue3.0中通过Proxy代理对象进u2f8f类似的操作。 补充 vue的双向绑定是通过数据劫持和发布者-订阅者模式实现的，数据劫持又是通过 Object.defineProperty()实现的 Proxy的优势如下: Proxy可以直接监听对象u2f7du2fae属性 Proxy可以直接监听数组的变化 Proxy有多达13种拦截u2f45法,不限于apply、ownKeys、deleteProperty、has等等是 Object.defineProperty 不具备的 Proxy返回的是u2f00个新对象,我们可以只操作新的对象达到u2f6c的,u2f7d Object.defineProperty 只能遍历对象属性直接修 改Proxy作为新标准将受到浏览器u2f1a商重点持续的性能优化，也就是传说中的新标准的性能红利 Object.defineProperty的优势如下: 兼容性好,u2f40持IE9 v-if 用于条件渲染 v-show 用于条件渲染，两者的区别请参考下一个问题 v-for 用于列表渲染 v-on 监听事件 v-bind 动态绑定 v-html 渲染html元素 v-model 数据双向绑定 v-if 是惰性的，只有条件为真时才会切换，为假时什么也不做。确保切换过程中的事件监听器和子组件适当的被销毁和重建，适用于运行条件很少改变的场景。v-show 不管条件是否为真，总是会被渲染，适用于频繁切换的场景 v-for优先级高于v-if，放于同级可能会重复渲染两次v-if，建议把v-for放于v-if所在的外层元素 原理:eventloop事件循环 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 key 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。不指定key时，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试 就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。 有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。 1.beforeCreate 初始化界面前 2.created 初始化界面后，拿到data，props，methods、computed和watch 3.beforeMount 渲染dom前 4.mounted 渲染dom后，拿到$el 5.beforeUpdate 更新前 6.updated 更新后，拿到更新后的dom 7.beforeDestroy 卸载组件前 8.destroyed 卸载组件后 9.activated 被 keep-alive 缓存的组件激活时调用 10.deactivated 被 keep-alive 缓存的组件停用时调用 虚拟dom是对真实dom的一种映射，新旧Vnode比较同层级的节点，然后根据两者的差异只更新有差异的部分，生成新的视图，而不是对树进行逐层搜素遍历，因此时间复杂度是O(n)。虚拟dom可以减少页面的回流和重绘，提升性能

之前开发一个后台管理系统，里面用到了 Vue 和 Element-UI 这个组件库，遇到一个挺有意思的问题，和大家分享一下。 场景是这样，在一个列表展示页上，我使用了 Element-UI 的表格组件，新的需求是在原表格的基础上支持拖拽排序。但是原有的组件本身不支持拖拽排序，而且由于是直接引入的 Element-UI ，不方便修改它的源码，所以比较可行的方法只能是 直接操作DOM 。 具体的做法是在 mounted 生命周期函数里，对 this.$el 进行真实DOM的操作，监听 drag 的一系列事件，在事件回调里移动DOM，并更新data。 HTML5 Drag 事件还是挺多的，和 Touch 事件差不多，自己手工实现也可以，不过这里就偷了个懒，直接用了一个开源的 Sortable 库，直接传入 this.$el ，监听封装后的回调，并且根据Vue的开发模式，在移动DOM的回调里更新实际的Data数据， 保持数据和DOM的一致性 。 如果你以为到这就结束了，那就大错特错，偷过的懒迟早要还。。。本以为这个方案是很美好的，没想到刚想调试一下，就出现了诡异的现象：A和B拖拽交换位置之后，B和A又神奇得换回去了！这是怎么回事？似乎我们的操作没有什么问题，在真实DOM移动了之后，我们也移动了相应的 data ，数据数组的顺序和渲染出DOM的顺序应该是一致的。 问题出在哪里？我们回忆一下Vue的实现原理，在Vue2.0之前是通过 defineProperty 依赖注入和跟踪的方式实现双向绑定。针对v-for数组指令，如果指定了唯一的Key，则会通过高效的Diff算法计算出数组内元素的差异，进行最少的移动或删除操作。而Vue2.0之后在引入了 Virtual Dom 之后， Children 元素的 Dom Diff 算法和前者其实是相似的，唯一的区别就是，2.0之前Diff直接针对 v-for 指令的数组对象，2.0之后则针对 Virtual Dom 。DOM Diff算法在这里不再赘述，这里解释的比较清楚 virtual-dom diff算法 假设我们的列表元素数组是 渲染出来后的DOM节点是 那么Virtual Dom对应的结构就是 假设拖拽排序之后，真实的DOM变为 此时我们只操作了真实DOM，改编了它的位置，而Virtual Dom的结构并没有改变，依然是 此时我们把列表元素也按照真实DOM排序后变成 这时候根据Diff算法，计算出的Patch为， VNode前两项是同类型的节点 ，所以直接更新，即把$A节点更新成$B，把$B节点更新成$A，真实DOM又变回了 所以就出现了拖拽之后又被Patch算法更新了一次的问题，操作路径可以简单理解为 根本原因是 Virtual DOM 和 真实DOM 之间出现了不一致。 所以在Vue2.0以前，因为没有引入 Virtual DOM ，这个问题是不存在的。 在使用Vue框架的时候要尽量避免直接操作DOM 3.暴力解决！不走patch更新，通过v-if设置，直接重新渲染一遍。当然不建议这么做，只是提供这种思路~ 所以，我们平时在使用框架的时候，也要去了解框架的实现原理的，否则遇到一些棘手的情况就会无从下手~

用v-model绑定单选框能带来很多便捷的开发体验。基础用法<template><divid="app"><inputtype="radio"id="male"value="Male"v-model="gender">Male<inputtype="radio"id="female"value="Female"v-model="gender">Femalea<p>{{gender}}</p></div></template><script>exportdefault{name:"app",data(){return{gender:""}}}</script>新建一个名为gender的数据模型，通过v-model把两个单选按钮都绑定gender，<p>也绑定了gender，所以单选按钮选了哪项，都会把对应的value值赋给gender，从而使<p>的内容也发生变化。通过v-model绑定，Vue会帮我们解决分组问题。以前使用单选按钮时，是需要设置name属性的，现在用v-model的话，就不用设置name属性了。默认值如果需要在页面第一次加载的时候就有一个默认选项，可以在数据模型里直接使用对应的value值。比如希望页面在第一次加载时默认选中Male。<template><divid="app"><inputtype="radio"id="male"value="Male"v-model="gender">Male<inputtype="radio"id="female"value="Female"v-model="gender">Female<p>{{gender}}</p></div></template><script>exportdefault{name:"app",data(){return{gender:"Male"}}}</script>只要把数据模型里的gender的值改成“Male”即可。当然，这个值是不能随便写的。一般是需要写上其中一个单选按钮的value值。如果随便写一个字符串也不会报错，最后的作用其实和空字符串一样。总结以上所述是小编给大家介绍的vue表单之通过v-model绑定单选按钮radio,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！您可能感兴趣的文章:对Vue-动态元素属性及v-bind和v-model的区别详解vuev-model实现自定义样式多选与单选功能vuev-model动态生成详解vue中v-model的应用及使用详解vue如何在自定义组件中使用v-modelvue项目中v-model父子组件通信的实现详解vue自定义组件v-model双向绑定、父子组件同步通信的多种写法vue中v-model动态生成的实例详解VUE中v-model和v-for指令详解浅谈Vuev-model指令的实现原理vuev-model表单控件绑定详解

1、什么是MVVM框架？它适用于哪些场景？ MVVM框架是一个 Model-View-View Model框架，其中 ViewModel连接模型Model）和视图（View）。 在数据操作比较多的场景中，MVVM框架更合适，有助于通过操作数据渲染页面。 2、active- class是哪个组件的属性？ 它是 vue-router模块的 router-link组件的属性。 3、如何定义Vue- router的动态路由？ 在静态路由名称前面添加冒号，例如，设置id动态路由参数，为路由对象的path属性设置/:id。 4、如何获取传过来的动态参数？ 在组件中，使用$router对象的 params.id，即 $route.params.id 。 5、vue- router有哪几种导航钩子？ 有3种。 第一种是全局导航钩子：router.beforeEach(to,from,next)。作用是跳转前进行判断拦截。 第二种是组件内的钩子。 第三种是单独路由独享组件。 6、mint-ui是什么？如何使用？ 它是基于 Vue.js的前端组件库。用npm安装，然后通过 import导入样式和JavaScript代码。vue.use(mintUi)用于实现全局引入， import {Toast} from " mint-ui"用于在单个组件局部引入。 7、V-model是什么？有什么作用？ v- model是 Vue. js中的一条指令，可以实现数据的双向绑定。 8、Vue.js中标签如何绑定事件？ 绑定事件有两种方式。 第一种，通过v-on指令， 。 第二种，通过@语法糖， input@ click= doLog()/>。 9、vuex是什么？如何使用？在哪种功能场景中使用它？ vuex是针对 Vue. js框架实现的状态管理系统。 为了使用vuex，要引入 store，并注入Vue.js组件中，在组件内部即可通过$ ostore访问 store对象。 使用场景包括：在单页应用中，用于组件之间的通信，例如音乐播放、登录状态管理、加入购物车等。 10、如何实现自定义指令？它有哪些钩子函数？还有哪些钩子函数参数？ 自定义指令包括以下两种。 它有如下钩子函数。 钩子函数的参数如下。 11、至少说出vue.js中的4种指令和它们的用法。 相关指令及其用法如下。 12、Vue-router是什么？它有哪些组件？ 它是 Vue. js的路由插件。组件包括 router-link和 router-vIew。 13、导航钩子有哪些？它们有哪些参数？ 导航钩子又称导航守卫，又分为全局钩子、单个路由独享钧子和组件级钧子。 全局钩子有 beforeEach、beforeResolve(Vue2.5.0新增的)、 afterEach。 单个路由独享钩子有 beforeEnter。 组件级钩子有 beforeRouteEnter、 beforeRouteUpdate(Vue2.2新增的) beforeRouteLeave。 它们有以下参数。 14、Vue.js的双向数据绑定原理是什么？ 具体步骤如下。 （1）对需要观察的数据对象进行递归遍历，包括子属性对象的属性，设置set和get特性方法。当给这个对象的某个值赋值时，会触发绑定的set特性方法，于是就能监听到数据变化。 （4）MVVM是数据绑定的入口，整合了 Observer、 Compile和 Watcher三者，通过Observer来监听自己的 model数据变化，通过 Compile来解析编译模板指令，最终利用Watcher搭起 Observer和 Compile之间的通信桥梁，达到数据变化通知视图更新的效果。利用视图交互，变化更新数据 model变更的双向绑定效果。 15、请详细说明你对Vue.js生命周期的理解。 总共分为8个阶段，分别为 beforeCreate、created、beforeMount、 mounted、beforeUpdate、 updated、 beforeDestroyed、 destroyed。 当使用组件的kep- alive功能时，增加以下两个周期。 Vue2.5.0版本新增了一个周期钩子：ErrorCaptured，当捕获一个来自子孙组件的错误时调用。 16、请描述封装Vue组件的作用过程。 组件可以提升整个项目的开发效率，能够把页面抽象成多个相对独立的模块，解决了传统项目开发中效率低、难维护、复用性等问题。 使用Vue.extend方法创建一个组件，使用Vue.component方法注册组件。子组件需要数据，可以在 props中接收数据。而子组件修改妤数据后，若想把数据传递给父组件，可以采用emit方法。 17、你是怎样认识vuex的？ vuex可以理解为一种开发模式或框架。它是对 Vue. js框架数据层面的扩展。通过状态（数据源）集中管理驱动组件的变化。应用的状态集中放在 store中。改变状态的方式是提交 mutations，这是个同步的事务。异步逻辑应该封装在 action中。 18、Vue- loader是什么？它的用途有哪些？ 它是解析.vue文件的一个加载器，可以将 template/js/style转换成 JavaScript模块。 用途是通过 vue-loader, JavaScript可以写 EMAScript 6语法， style样式可以应用scss或less, template可以添加jade语法等。 19、请说出vue.cli项目的src目录中每个文件夹和文件的用法。 assets文件夹存放静态资源；components存放组件；router定义路由相关的配置；view是视图；app. vue是一个应用主组件；main.js是入口文件。 20、在Vue.cli中怎样使用自定义组件？在使用过程中你遇到过哪些问题？ 具体步骤如下。 （1）在 components目录中新建组件文件，脚本一定要导出暴露的接口。 （2）导入需要用到的页面（组件）。 （3）将导入的组件注入uejs的子组件的 components属性中。 （4）在 template的视图中使用自定义组件。 21、谈谈你对vue.js的 template编译的理解。 简而言之，就是首先转化成AST（ Abstract Syntax Tree，抽象语法树），即将源代码语法结构抽象成树状表现形式，然后通过 render函数进行渲染，并返回VNode（ Vue. js的虚拟DOM节点）。 详细步骤如下。 （1）通过 compile编译器把 template编译成AST, compile是 create Compiler的返回值， createCompiler用来创建编译器。另外， compile还负责合并 option。 （2）AST会经过 generate（将AST转化成 render funtion字符串的过程）得到 render函数， render的返回值是 VNode, VNode是 Vue.Js的虚拟DOM节点，里面有标签名子节点、文本等。 22、说一下Vue.js中的MVVM模式。 MVVM模式即 Model- View- ViewModel模式。 Vue.js是通过数据驱动的， Vue. js实例化对象将DOM和数据进行绑定，一旦绑定，和数据将保持同步，每当数据发生变化，DOM也会随着变化。 ViewModel是Vue.js的核心，它是 Vue.js的一个实例。Vue.js会针对某个HTML元素进行实例化，这个HTML元素可以是body，也可以是某个CSS选择器所指代的元素。 DOM Listeners和 Data Bindings是实现双向绑定的关键。DOM Listeners监听页面所有View层中的DOM元素，当发生变化时，Model层的数据随之变化。Data Bindings会监听 Model层的数据，当数据发生变化时，View层的DOM元素也随之变化。 23、v-show指令和v-if指令的区别是什么？ v-show与v-if都是条件渲染指令。不同的是，无论v-show的值为true或 false，元素都会存在于HTML页面中；而只有当v-if的值为true时，元素才会存在于HTML页面中。v-show指令是通过修改元素的 style属性值实现的。 24、如何让CSS只在当前组件中起作用？ 在每一个Vue.js组件中都可以定义各自的CSS、 JavaScript代码。如果希望组件内写的CSS只对当前组件起作用，只需要在Style标签添加Scoped属性，即 。 25、如何创建vue.js组件？ 在vue.js中，组件要先注册，然后才能使用。具体代码如下 26、如何实现路由嵌套？如何进行页面跳转？ 路由嵌套会将其他组件渲染到该组件内，而不是使整个页面跳转到 router-view定义组件渲染的位置。要进行页面跳转，就要将页面渲染到根组件内，可做如下配置。 首先，实例化根组件，在根组件中定义组件渲染容器。然后，挂载路由，当切换路由时，将会切换整个页面。 27、ref属性有什么作用？ 有时候，为了在组件内部可以直接访问组件内部的一些元素，可以定义该属性此时可以在组件内部通过this. $refs属性，更快捷地访问设置ref属性的元素。这是一个原生的DOM元素，要使用原生 DOM API操作它们，例如以下代码。 注意：在Ve2.0中，ref属性替代了1.0版本中v-el指令的功能。 28、Vue. js是什么？ Vue. js的目标是通过尽可能简单的API实现响应式的数据绑定的组件开发。 29、描述vue.js的一些特性。 Vue.js有以下持性。 （1）MVVM模式。 数据模型（ Model）发生改变，视图（View）监听到变化，也同步改变；视图（View）发生改变，数据模型（ Model）监听到改变，也同步改变。 使用MVVM模式有几大好处。 （2）组件化开发 （3）指令系统 （4）Vue2.0开始支持虚拟DOM。 但在Vue1.0中，操作的是真实DOM元素而不是虚拟DOM，虚拟DOM可以提升页面的渲染性能。 30、描述vue.js的特点。 Vue. js有以下特点。 31、在vue.js中如何绑定事件？ 通过在v-on后跟事件名称=“事件回调函数( )”的语法绑定事件。事件回调函数的参数集合( )可有可无。如果存在参数集合( )，事件回调函数的参数需要主动传递，使用事件对象要传递 $event。当然，此时也可以传递一些其他自定义数据。如果没有参数集合，此时事件回调函数有一个默认参数，就是事件对象。事件回调函数要定义在组件的 methods属性中，作用域是 Vue. js实例化对象，因此在方法中，可以通过this使用 Vue. js中的数据以及方法，也可以通过@语法糖快速绑定事件，如@事件名称=“事件回调函数( )”。 32、请说明 组件的作用。 当 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 keep-alive>是一个抽象组件，它自身不会渲染一个DOM元素，也不会出现在父组件链中。 当在 内切换组件时，它的 activated和 deactivated这两个生命周期钧子函数将会执行。 33、axios是什么？如何使用它？ axios是在vue2.0中用来替换 vue-resource.js插件的一个模块，是一个请求后台的模。 用 npm install axios安装 axios。基于 EMAScript 6 的 EMAScript Module规范，通过 import关键字将 axios导入，并添加到 Vue. js类的原型中。这样每个组件（包括vue.js实例化对象）都将继承该方法对象。它定义了get、post等方法，可以发送get或者post请求。在then方法中注册成功后的回调函数，通过箭头函数的作用域特征，可以直接访问组件实例化对象，存储返回的数据。 34、在 axios中，当调用 axios.post("api/user"）时进行的是什么操作？ 当调用post方法表示在发送post异步请求。 35、sass是什么？如何在ue中安装和使用？ sass是一种CSS预编译语言安装和使用步骤如下。 （1）用npm安装加载程序（ sass-loader、 css-loader等加载程序)。 （2）在 webpack. config. js中配置sass加载程序。 （3）在组件的 style标签中加上lang属性，例如lang="scss"。 36、如何在 Vue. js中循环插入图片？ 对“src”属性插值将导致404请求错误。应使用 v-bind:src格式代替。 代码如下：

你可以用渲染的时候让 h 这种动态生成的方法来加上this.my_variables ; 下面是例子或者使用$refs,给你的input一个id，然后获取到以后，用compute好的值给他赋值；renderHeader: (h)=>{return h("div",[h("strong","序号"),h("Icon",{props:{type: this.my_variables},style: {marginLeft: "5px"}})]);},我也是在学习，希望能有所帮助

dataset.index

1.1、单个 v- model 数据绑定 默认情况下,组件上的 v- model 便用 modelvalue 作为 prop 和 update : modelvalu 作为事件。 我们可以通过向 v - model 传递参数来修改这些名称: 在本例中,子组件将需要一 个 foo prop 并发出 update : foo 要同步的事件: 1.2、多个 v- model 绑定 通过利用以特定 prop 和事件为目标的能力,正如我们们之前在 v-model 参数中所学的那样,我们现在可以在单个组件实例上创建多个 v - model 绑定。 每个 v-model 将同步到不同的 prop ,而不需要在组件中添加额外的选项。

1. 在组件内的data对象中创建一个props属性的副本因为result不可写，所以需要在data中创建一个副本myResult变量，初始值为props属性result的值，同时在组件内所有需要调用props的地方调用这个data对象myResult。Vue.component("switchbtn", {template: "<div @click="change">{{myResult?"开":"关"}}</div>",props: ["result"],data: function () {return {myResult: this.result//data中新增字段};},......});2. 创建针对props属性的watch来同步组件外对props的修改此时在组件外（父组件）修改了组件的props，会同步到组件内对应的props上，但是不会同步到你刚刚在data对象中创建的那个副本上，所以需要再创建一个针对props属性result的watch（监听），当props修改后对应data中的副本myResult也要同步数据。Vue.component("switchbtn", {template: "<div @click="change">{{myResult?"开":"关"}}</div>",props: ["result"],data: function () {return {myResult: this.result};},watch: {result(val) {this.myResult = val;//新增result的watch，监听变更并同步到myResult上}},......3. 创建针对props副本的watch，通知到组件外此时在组件内修改了props的副本myResult，组件外不知道组件内的props状态，所以需要再创建一个针对props副本myResult，即对应data属性的watch。在组件内向外层（父组件）发送通知，通知组件内属性变更，然后由外层（父组件）自己来变更他的数据最终全部代码：<div id="app"><switchbtn :result="result" @on-result-change="onResultChange"></switchbtn><input type="button" value="change" @click="change"></div>Vue.component("switchbtn", {template: "<div @click="change">{{myResult?"开":"关"}}</div>",props: ["result"],data: function () {return {myResult: this.result//①创建props属性result的副本--myResult};},watch: {result(val) {this.myResult = val;//②监听外部对props属性result的变更，并同步到组件内的data属性myResult中},myResult(val){//xxcanghai 小小this.$emit("on-result-change",val);//③组件内对myResult变更后向外部发送事件通知}},methods: {change() {this.myResult = !this.myResult;}}});new Vue({el: "#app",data: {result: true},methods: {change() {this.result = !this.result;},onResultChange(val){this.result=val;//④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中}}});至此，实现了组件内数据与组件外的数据的双向绑定，组件内外数据的同步。最后归结为一句话就是：组件内部自己变了告诉外部，外部决定要不要变。

选择Vue而不选择Angular，有下面几个原因，当然不是对每个人都适合：在API与设计

这次给大家带来怎样使用vue.js中v-model指令实现数据双向绑定，使用vue.js中v-model指令实现数据双向绑定的注意事项有哪些，下面就是实战案例，一起来看一下。vue.js的一大功能便是实现数据的双向绑定，本文就表单处理时运用v-model指令实现双向绑定做一个介绍：v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上，所谓双向绑定，指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据。这是通过设置属性访问器实现的。例如：app.html<!doctype html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title> vuejs v-model 数据双向绑定 </title> <style type="text/css"> [v-cloak] { display: none } </style></head><body> <p id="app"> <form> 姓名： <input type="text" v-model="data.name" placeholder="姓名"/> <br /> 性别： <input type="radio" id="one" value="One" v-model="data.sex"/> <label for="man">男</label> <input type="radio" id="two" value="Two" v-model="data.sex"/> <label for="male">女</label> <br /> <input type="checkbox" id="jack" value="book" v-model="data.interest"/> <label for="jack">阅读</label> <input type="checkbox" id="john" value="swim" v-model="data.interest"/> <label for="john">游泳</label> <input type="checkbox" id="move" value="game" v-model="data.interest"/> <label for="move">游戏</label> <input type="checkbox" id="mike" value="song" v-model="data.interest"/> <label for="mike">唱歌</label> <br /> 身份： <select v-model="data.identity"> <option value="teacher" selected>教师</option> <option value="doctor">医生</option> <option value="lawyer">律师</option> </select> </form> <p><pre>data: {{$data | json 2}}</pre></p> </p></body><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" charset="utf-8"></script><script src="https://cdn.bootcss.com/vue/2.3.0/vue.min.js" charset="utf-8"></script><script type="text/javascript">$(function() { new Vue({ el: "#app", data: { data:{ name:"", sex:"", interest:[], identity:"" } } })})</script></html>相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！推荐阅读：如何实现vue input输入框模糊查询怎样使用nodejs express配置自签名https服务器

双向绑定概念其实很简单，就是视图（View）的变化能实时让数据模型（Model）发生变化，而数据的变化也能实时更新到视图层。我们所说的单向数据绑定就是从数据到视图这一方向的关系。 使用Object.defineProperty、Proxy对数据进行监听拦截。 vue3.0 开始 Proxy代替Object.defineProperty 绑定事件处理函数，实时修改数据。 将数据与相关dom节点绑定在一起，修改数据的时候对应的dom节点也应一起改变。

博客园整理了一下，有好的面试题欢迎大家发在评论区哟 1. 闭包 2. 数组去重 3. 原型和原型链 4. call,apply,bind三者的区别？ 5. 请介绍常见的 HTTP 状态码(至少五个) 6. 深浅拷贝 7. 实现(5).add(3).minus(2)输出6 8. null和undefined区别 9. MVC和MVVC? 10. Vue生命周期 11. Vue数据双向绑定原理 12. Vue组件传参 13. 说说各浏览器存在的兼容问题 14. router和route 15. active-class属于Vue哪一个modules,有什么作用 16. v-if和v-show 17. computed和watch有什么区别 18.Vue 组件中 data 为什么必须是函数 19. vue中子组件调用父组件的方法 20. vue中 keep-alive 组件的作用 21. vue中如何编写可复用的组件？ 22. Vue 如何去除url中的 # 23. Vue 中 key 的作用 24. Vue 中怎么自定义指令 25. Vue 中怎么自定义过滤器 26. NextTick 是做什么的 27. Vue 组件 data 为什么必须是函数 28. 计算属性computed 和事件 methods 有什么区别 29. scoped（死够扑的） 30. vue如何获取dom? 31. promise 32. vue常用指令有哪些 33.vue-loader是什么?使用和用途？ 34.css样式局部化，如何让css只在当前组件起作用?scss和stytus样式穿透 闭包指有权访问另一个函数中变量的函数， MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures B站视频： https://www.bilibili.com/video/BV1YJ411R7ap?from=search&seid=18157596230752413126 https://www.jianshu.com/p/9c3547450a52 https://search.bilibili.com/all?keyword=%E5%8E%9F%E5%9E%8B%E9%93%BE%20%E9%BB%91%E9%A9%AC 都是用来改变this指向的 call和apply都是function原型上的方法，每一个函数作为function的实例都可以调用这两个方法，而这两个方法都是用来改变this指向的 一般情况下this指向其调用者（） fun.call(thisArg,arg1,ary2,...) 主要作用可以实现继承 调用函数，改变this指向 继承 fun.apply(thisArg,[argsArray]) 作用：调用函数，改变函数内部this指向 参数必须是数组 apply主要应用于借助数学对象等 bind()方法不会调用函数，但可以改变函数内部this指向 fun.bind(thisArg,arg1,arg2,...) thisArg:在fun函数运行时指定的this值 arg1，arg2:传递的其他参数 返回由指定的this值和初始化参数改造的原函数拷贝 call的性能要比apply好一些，尤其当传递参数超过3个，后期开发可多用call 时间测试 状态码是由 3 位数组成，第一个数字定义了响应的类别，且有五种可能取值: 1xx：指示信息–表示请求已接收，继续处理。 2xx：成功–表示请求已被成功接收、理解、接受。 3xx：重定向–要完成请求必须进行更进一步的操作。 4xx：客户端错误–请求有语法错误或请求无法实现。 5xx：服务器端错误–服务器未能实现合法的请求。 阮一峰： http://www.ruanyifeng.com/blog/2014/03/undefined-vs-null.html MVC 是后端中的概念 MVVC中 是前端概念 最终实现V和M数据的同步，因此开发者只需关注业务逻辑，不需要手动操作Dom，mvvm是vue的核心 这两个不同的结构可以看出两者的区别，他们的一些属性是不同的。 active-class 属于vue-router的样式方法 当routerlink标签被点击时将会应用这个样式 使用有两种方法 routerLink标签内使用 在使用时会有一个Bug 首页的active会一直被应用 解决办法 为了解决上面的问题，还需加入一个属性exact,类似也有两种方式： 在router-link中写入exact 在路由js文件,配置active-class 还可以不用exact这种方法去解决，例如 首页 路由中加入重定向 computed computed是计算属性，也就是计算值，它更多用于计算值的场景 computed具有缓存性，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时重新调用对应的getter来计算 computed适用于计算比较消耗性能的计算场景 watch watch更多的是[观察]的作用，类似于某些数据的监听回调，用于观察props $emit或者本组件的值，当数据变化时来执行回调进行后续操作 无缓存性，页面重新渲染时值不变化也会执行 小结 当我们要进行数值计算，而且依赖于其他数据，那么把这个数据设计为computed 如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化。 去这里看一下u200bblog.csdn.net vue-router 默认使用 hash 模式，所以在路由加载的时候，项目中的 url 会自带 #。如果不想使用 #， 可以使用 vue-router 的另一种模式 history new Router({ mode: "history", routes: [ ] }) 需要注意的是，当我们启用 history 模式的时候，由于我们的项目是一个单页面应用，所以在路由跳转的时候，就会出现访问不到静态资源而出现 404 的情况，这时候就需要服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面 具体参考 官方API 参考 官方文档-自定义指令 过滤器也同样接受全局注册和局部注册 具体可参考官方文档 深入响应式原理 我们可以将同一函数定义为一个 method 或者一个计算属性。对于最终的结果，两种方式是相同的 不同点： 让css只在当前组件中起作用

MVVM理解(面试题)1、双向绑定技术，当Model变化时，View-Model会自动更新，View也会自动变化。很好做到数据的一致性，不用担心，在模块的这一块数据是这个值，在另一块就是另一个值了。2、MVVM是Model-View-ViewModel的缩写，即模型-视图-视图模型。MVVM是一种设计思想。3、MVVM是Model-View-ViewModel的简写。视图模型mvvm模式的核心，它是连接view和model的桥梁。模型指的是后端传递的数据。视图指的是所看到的页面。4、Vue.js有以下持性。(1)MVVM模式。数据模型(Model)发生改变，视图(View)监听到变化，也同步改变；视图(View)发生改变，数据模型(Model)监听到改变，也同步改变。使用MVVM模式有几大好处。mvvm模式和mvc的区别mvc中Controller演变成mvvm中的viewModel。mvvm通过数据来驱动视图层的显示而不是节点操作。mvc中Model和View是可以直接打交道的，造成Model层和View层之间的耦合度高。MVC模式是MVVM模式的基础，他们的MV即Model，view相同，不同的是MV之间的纽带部分。MVVM和MVC的区别就是MVVM实现了自动同步，MVVM比较精简。MVC全名是ModelViewController，是模型(model)－视图(view)－控制器(controller)的缩写。MVVM是Model-View-ViewModel的简写。它本质上就是MVC的改进版。MVC即：Model-View-Controller（模型-视图-控制器），其中M是指业务模型、V是指界面显示层、C是控制器。MVC目的是将M层和V层分离，在此模式下可实现同一个程序使用不同的表现形式。MVVMMVVM模式将Presenter改名为ViewModel，基本上与MVP模式完全一致。唯一的区别是，它采用双向绑定（data-binding）：View的变动，自动反映在ViewModel，反之亦然。什么是MVVM1、MVVM是Model-View-ViewModel的缩写，它是一种基于前端开发的架构模式，其核心是提供对View和ViewModel的双向数据绑定，这使得ViewModel的状态改变可以自动传递给View，即所谓的数据双向绑定。2、MVVM是Model-View-ViewModel的简写。它本质上就是MVC的改进版。MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）最典型的MVC就是JSP+servlet+javabean的模式。3、MVVM是Model-View-ViewModel的缩写。Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。View代表UI组件，它负责将数据模型转化成UI展现出来。CodeMeter支持哪些应用场景？1、加密保护自己的软件：利用加密狗提供的开发套件，以及操作文档，对自己的软件进行加密，当然加密狗供应商，会提供技术支持，通用的加密狗，使用起来也一定是简单方便的。2、常用通讯软件：目前安装使用过QQ、微信、TIM、YY等，都没有出过问题。常用浏览器软件：目前安装使用过谷歌、360、火狐、IE等，安装使用无问题。3、RainbowiKey：是一种常用的加密狗设备，可以支持Solidworks软件的授权认证和保护。SentinelHASP：这是一种可移动的USB加密狗，具有强大的加密保护和授权管理功能，可以广泛应用于Solidworks等软件的版权保护。

1. 在组件内的data对象中创建一个props属性的副本因为result不可写，所以需要在data中创建一个副本myResult变量，初始值为props属性result的值，同时在组件内所有需要调用props的地方调用这个data对象myResult。Vue.component("switchbtn", {template: "<div @click="change">{{myResult?"开":"关"}}</div>",props: ["result"],data: function () {return {myResult: this.result//data中新增字段};},

刚好，我昨天也碰到这个问题。倒腾了一下，参考组件里的相关写法<comp-heading v-model="name"></comp-heading>{{name}}Vue.component("comp-heading",{render: function (createElement) {var self = this;return createElement("input", {domProps: {value: self.value},on: {input: function (event) {self.updateValue(event.target.value);}}})},methods: {updateValue: function (value) {this.$emit("input", value)}}});

刚好，我昨天也碰到这个问题。倒腾了一下，参考组件里的相关写法<comp-heading v-model="name"></comp-heading> {{name}}Vue.component("comp-heading",{ render: function (createElement) { var self = this; return createElement("input", { domProps: { value: self.value }, on: { input: function (event) { self.updateValue(event.target.value); } } }) }, methods: { updateValue: function (value) { this.$emit("input", value) } }});

model属性。带有model属性的元素都会实现双向绑定，无论是元素的值改变，还是数据被改变，都会触发二者同时更新。

Vue2 取消了 .sync 指令修饰符，推崇单向闭环的数据流。即：父级通过 props 向子级传递数据，子级如果需要修改数据就需要在父级添加监听事件，并在子级中去触发事件修改值。在多数情况下，是不需要双向绑定的，单向数据流更容易追踪数据变化排查问题。但一些特定场景下，如弹窗，除了外部由父组件控制显示和隐藏外，组件内部也有关闭和取消等按钮需要控制显示和隐藏。这虽然可以通过触发事件让父级修改显示状态来实现，但每一个弹窗组件都需要做一遍这样的事总觉得很不爽。v-modelv-model 是 Vue2 中唯一支持双向绑定的指令，用于表单控件绑定，但不代表它只能用在表单控件之上。在文档 使用自定义事件的表单输入组件 一节中提到了， v-model 其实是个语法糖。<input v-model="something"><!-- 等价于以下内容 --><input :value="something" @input="something = $event.target.value">也就是说，你只需要在组件中声明一个 name 为 value 的 props ，并且通过触发 input 事件传入一个值，就能修改这个 value 。父组件中引用<myComponent v-model="title"></myComponent>子组件const myComponent = {template: "<div><h1>{{value}}</h1><button @click="changeTitle">Change</button></div>",props: {value: String},methods: {changeTitle() {this.$emit("input", "子组件")}}}上面这个例子，最初显示的是父组件传入的 title ，点击子组件中的按钮后会修改显示值为子组件 。组件内部控制关闭的弹窗现在可以解决弹窗组件内部自行关闭的问题了。Demo多字段的双向绑定一个组件只能定义一个 v-model ，假如想双向绑定多个值怎么办？v-model 并没有限制 value 的数据类型，只是限制了是 一个值！ 那么只需要把 value 的数据类型换成 Object 或者 Array ，把多出的字段作为对象的属性或数组的元素传入，多少个都不是问题了。从最佳实践角度出发，推荐只是特定场景下使用，比如自定义的表单组件。

Vuex原理面试是专门为Vue服务，用于管理页面的数据状态、提供统一数据操作的生态系统，相当于数据库mongoDB，MySQL等，任何组件都可以存取仓库中的数据。其中vuex类似的 还是有Redux,Redux大多用于React,针对Redux后续在做补充。其中Vuex采用MVC模式中的Model层，规定所有的数据必须通过action--->mutaion--->state这个流程进行来改变状态的。再结合Vue的数据视图双向绑定实现页面的更新。统一页面状态管理，可以让复杂的组件交互变的简单清晰，同时在调试时也可以通过DEVtools去查看状态。扩展资料面试注意事项：1、在vue例子中，通过click事件，触发methods中的方法。当存在异步时，而在vuex中需要dispatch来触发actions中的方法，actions中的commit可以触发mutations中的方法。同步，则直接在组件中commit触发vuex中mutations中的方法。2、在没有actions的情况下：数据：state --> data 获取数据：getters --> computed 更改数据：mutations --> methods视图通过点击事件，触发mutations中方法，可以更改state中的数据，一旦state数据发生更改，getters把数据反映到视图。

v-model主要提供了两个功能，view层输入值影响data的属性值，data属性值发生改变会更新view层的数值变化。其核心就是，一方面modal层通过defineProperty来劫持每个属性，一旦监听到变化通过相关的页面元素更新。另一方面通过编译模板文件，为控件的v-model绑定input事件，从而页面输入能实时更新相关data属性值。v-model是什么v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。

data程序中。vue的双向绑定手机关键点由data程序控制，只有进入data程序才能绑定手机关键点，因此在data程序中。vue是iOS和Android平台上的一款Vlog社区与编辑工具，允许用户通过简单的操作实现Vlog的拍摄、剪辑、细调、和发布，记录与分享生活。

jQuery是最早的js框架，优点是简化DOM操作，缺点是DOM操作太频繁，影响前端性能。Anguler是Google收购的前端框架，其特点就是将后台的MVC模式搬到前台并增加了模块化开发的理念；缺点是版本迭代不合理，1代 -> 2代就是两个东西，目前最新应该是v12。React是Facebook出品，其特点是提出了虚拟DOM的概念用于减少真实DOM的操作，在内存中模拟DOM操作，有效的提升了前端渲染的效率；缺点是使用繁杂，需要额外学习一门 JSX 语言。vue是一个中国人开发的（尤雨溪），其特点是综合了 Anguler（模块化）和 React（虚拟DOM）的优点，是一款渐进式js框架（就是逐步实现新特性）；由于vue不具备通信能力，所以要额外使用一个通信框架与服务器交互。Axios是前端通信框架，与之类似的有jQuery提供的Ajax通信功能。

vue.js的优点和缺点在哪?AngularJS的学习成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比较简单、直观。在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢。Vue.js使用基于依赖追踪的观察并且使用异步队列更新。缺点：新生儿：Vue.js是一个新的项目，没有angular那么成熟。影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库 不支持IE8。Vue的优缺点：易于使用： Vue.js包含基于HTML的标准模板，可以更轻松地使用和修改现有应用程序。更顺畅的集成：无论是单页应用程序还是复杂的Web界面，Vue.js都可以更平滑地集成更小的部件，而不会对整个系统产生任何影响。Vue.js采用了组件化的开发方式，将一个大型应用程序拆分成多个小的组件。这种方式让应用程序更易于维护和扩展，同时也提高了代码的复用性。渐进式构建能力是vue.js最大的优势，vue 有一个简洁而且合理的架构，使得它易于理解和构建。vue 有一个强大的充满激情人群的社区，这为vue.js增加了巨大的价值，使得为一个空白项目创建一个综合的解决方案变得十分容易。使用vue组件有什么优缺点?1、优点：性能好 简单易用 前后端分离 单页面应用用户体验好 缺点：vue是做单页应用的，多页应用虽然也可以做，但是不够灵活。2、缺点：新生儿：Vue.js是一个新的项目，没有angular那么成熟。影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库 不支持IE8。3、Vue的优缺点：易于使用： Vue.js包含基于HTML的标准模板，可以更轻松地使用和修改现有应用程序。更顺畅的集成：无论是单页应用程序还是复杂的Web界面，Vue.js都可以更平滑地集成更小的部件，而不会对整个系统产生任何影响。4、vue优点：因其性能好、入门快、轻量化、可拓展性强、数据流双向绑定、灵活、模块友好等特点，成为了许多前端开发者搭建框架的首选。jsp取数据比较方便，而且是后端直接渲染返回html，因而天然可以做seo。vue虚拟dom实现原理啊哈，人们经常说Virtual DOM是什么呢？t019804d4b5dfd6da0b Vue.js(0版本)与React的其中最大一个相似之处，就是他们都使用了一种叫Virtual DOM的东西。首先明确DOM的相关操作需要调用web application对性能损耗是比较高的。先看看常规的思路 改良思路（仍然使用DOM）React的思路 Vue和react的虚拟DOM的原理和步骤是完全一致的。很多同学在面试的时候都会被问到vue的虚拟DOM的diff 以及 patch 的过程，如果这vue的源码了解不是很深刻，很难通过面试官的法眼，下面就来用通俗易懂的方式聊一聊Vue的patch过程。虚拟DOM的解决方式是，通过状态生产一个虚拟状态Dom，然后根据虚拟节点进行渲染，假如是首次渲染的就会直接渲染，但是二次往后的话就是进行虚拟状态树的对比，只更新不同的地方。vue为什么不直接操作dom说法错误的是当其他页面出现相同的元素，也会被获取到，而且jQuery操作的dom，如果是根据动态获取数据渲染的，那么写在mounted里的操作方法将会失效，必须放到updated里，这样会导致有些操作被执行多遍，所以还是 不建议 在vue中使用jQuery。ref ：被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的 $refs 对象上。如果在普通的DOM元素上使用，那么指向的就是普通的DOM元素。原因分析：猜测是vue使用的虚拟DOM，使得页面虽然已经渲染出来，但在Vue实例中让处在在虚拟DOM中，无法获取。jquery和vue效率对比1、vue是目前最流行的前端的技术框架之一，目前很多公司都在使用。jquery是前端技术框架之一，基于javascript语言的，可以快速搭建前端工程，对页面控件进行控制和绚烂。2、jQuery是直接来操作DOM的，凭借简化后的API直接和DOM对话（优异的兼容性）； Vue是直接来操作数据的，拿数据说话。3、Vue.js Vue.js是Javascript家庭的一个新成员。在它的众多优势中，我认为它“易于学习”应该排在首位。简单性贯穿它的设计始终。4、vue.js：Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。5、不同的概念吧，jquery不过是操作DOM的工具库，Vue是为了快速开发，省去了你操作DOM的时间、开发非常快速便利。

vue.js的优点和缺点在哪?AngularJS的学习成本高，比如增加了DependencyInjection特性，而Vue.js本身提供的API都比较简单、直观。在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢。Vue.js使用基于依赖追踪的观察并且使用异步队列更新。缺点：新生儿：Vue.js是一个新的项目，没有angular那么成熟。影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库不支持IE8。Vue的优缺点：易于使用：Vue.js包含基于HTML的标准模板，可以更轻松地使用和修改现有应用程序。更顺畅的集成：无论是单页应用程序还是复杂的Web界面，Vue.js都可以更平滑地集成更小的部件，而不会对整个系统产生任何影响。Vue.js采用了组件化的开发方式，将一个大型应用程序拆分成多个小的组件。这种方式让应用程序更易于维护和扩展，同时也提高了代码的复用性。渐进式构建能力是vue.js最大的优势，vue有一个简洁而且合理的架构，使得它易于理解和构建。vue有一个强大的充满激情人群的社区，这为vue.js增加了巨大的价值，使得为一个空白项目创建一个综合的解决方案变得十分容易。使用vue组件有什么优缺点?1、优点：性能好简单易用前后端分离单页面应用用户体验好缺点：vue是做单页应用的，多页应用虽然也可以做，但是不够灵活。2、缺点：新生儿：Vue.js是一个新的项目，没有angular那么成熟。影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库不支持IE8。3、Vue的优缺点：易于使用：Vue.js包含基于HTML的标准模板，可以更轻松地使用和修改现有应用程序。更顺畅的集成：无论是单页应用程序还是复杂的Web界面，Vue.js都可以更平滑地集成更小的部件，而不会对整个系统产生任何影响。4、vue优点：因其性能好、入门快、轻量化、可拓展性强、数据流双向绑定、灵活、模块友好等特点，成为了许多前端开发者搭建框架的首选。jsp取数据比较方便，而且是后端直接渲染返回html，因而天然可以做seo。vue虚拟dom实现原理啊哈，人们经常说VirtualDOM是什么呢？t019804d4b5dfd6da0bVue.js(0版本)与React的其中最大一个相似之处，就是他们都使用了一种叫VirtualDOM的东西。首先明确DOM的相关操作需要调用webapplication对性能损耗是比较高的。先看看常规的思路改良思路（仍然使用DOM）React的思路Vue和react的虚拟DOM的原理和步骤是完全一致的。很多同学在面试的时候都会被问到vue的虚拟DOM的diff以及patch的过程，如果这vue的源码了解不是很深刻，很难通过面试官的法眼，下面就来用通俗易懂的方式聊一聊Vue的patch过程。虚拟DOM的解决方式是，通过状态生产一个虚拟状态Dom，然后根据虚拟节点进行渲染，假如是首次渲染的就会直接渲染，但是二次往后的话就是进行虚拟状态树的对比，只更新不同的地方。vue为什么不直接操作dom说法错误的是当其他页面出现相同的元素，也会被获取到，而且jQuery操作的dom，如果是根据动态获取数据渲染的，那么写在mounted里的操作方法将会失效，必须放到updated里，这样会导致有些操作被执行多遍，所以还是不建议在vue中使用jQuery。ref：被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用，那么指向的就是普通的DOM元素。原因分析：猜测是vue使用的虚拟DOM，使得页面虽然已经渲染出来，但在Vue实例中让处在在虚拟DOM中，无法获取。jquery和vue效率对比1、vue是目前最流行的前端的技术框架之一，目前很多公司都在使用。jquery是前端技术框架之一，基于javascript语言的，可以快速搭建前端工程，对页面控件进行控制和绚烂。2、jQuery是直接来操作DOM的，凭借简化后的API直接和DOM对话（优异的兼容性）；Vue是直接来操作数据的，拿数据说话。3、Vue.jsVue.js是Javascript家庭的一个新成员。在它的众多优势中，我认为它“易于学习”应该排在首位。简单性贯穿它的设计始终。4、vue.js：Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，方便与第三方库或既有项目整合。5、不同的概念吧，jquery不过是操作DOM的工具库，Vue是为了快速开发，省去了你操作DOM的时间、开发非常快速便利。

在组件内的data对象中创建一个props属性的副本 因为result不可写，所以需要在data中创建一个副本myResult变量

第二章 面试题基础篇 2.1 HTML面试题 面试题：行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？ 面试题：页面导入样式时，使用link和@import有什么区别？ 面试题：title与h1的区别、b与strong的区别、i与em的区别？ 面试题：img标签的title和alt有什么区别？ 面试题：png、jpg、gif 这些图片格式解释一下，分别什么时候用？ 2.2 CSS面试题 面试题：css背景纹路 面试题：介绍一下CSS的盒子模型 面试题：CSS选择符有哪些？哪些属性可以继承？ 面试题：CSS优先级算法如何计算？ 面试题：用CSS画一个三角形 面试题：一个盒子不给宽度和高度如何水平垂直居中？ 面试题：display有哪些值？说明他们的作用。 面试题：对BFC规范(块级格式化上下文：block formatting context)的理解？ 面试题：清除浮动有哪些方式？ 面试题：在网页中的应该使用奇数还是偶数的字体？为什么呢？ 面试题：写一个左中右布局占满屏幕，其中左、右俩块固定宽200，中间自适应宽，要求先加载中间块，请写出结构及样式。 面试题：什么是CSS reset？ 面试题：css sprite是什么,有什么优缺点 面试题：display: none;与visibility: hidden;的区别 面试题：position有哪些值?有什么作用? 【特别多公司问】 面试题：line-height和height有什么区别？ 面试题：opacity 和 rgba区别 2.3 JavaScript基础面试题 面试题：延迟加载JS有哪些方式？ 面试题：JS数据类型有哪些？ 面试题：null和undefined的区别 面试题：JS数据类型考题 面试题：==和===有什么不同 面试题：JS微任务和宏任务 面试题：JS作用域考题 面试题：JS对象考题 面试题：JS作用域+this指向+原型 考题 面试题：JS判断变量是不是数组，你能写出哪些方法？ 面试题：slice是干嘛的、splice是否会改变原数组 面试题：JS数组去重 面试题：找出多维数组最大值 面试题：给字符串新增方法实现功能 面试题：找出字符串出现最多次数的字符以及次数 2.4 真正移动端 —— H5/C3面试题 面试题：什么是语义化标签 面试题：::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。 面试题：如何关闭iOS键盘首字母自动大写 面试题：怎么让Chrome支持小于12px 的文字？ 面试题：rem和em有什么样区别 面试题：ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉 面试题：webkit表单输入框placeholder的颜色值能改变吗？ 面试题：禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片 面试题：禁止ios和android用户选中文字 面试题：自适应 [淘宝无线适配] 面试题：响应式 第三章 面试题进阶篇 3.1 JavaScript进阶面试题 面试题：new操作符具体做了什么 面试题：闭包 【必须会】 面试题：原型链 【必须会】 面试题： JS继承有哪些方式 面试题：说一下call、apply、bind区别 面试题：sort背后原理是什么？ 面试题：深拷贝和浅拷贝 面试题：localstorage、sessionstorage、cookie的区别 3.2 ES6面试题 面试题：var、let、const区别 面试题：作用域考题 面试题：将下列对象进行合并 面试题：箭头函数和普通函数有什么区别？ 面试题：Promise有几种状态 面试题：find和filter的区别 【大厂】 面试题：some和every的区别 【大厂】 3.3 webpack面试题 面试题：webpack插件 3.4 Git面试题 面试题：git常用命令 面试题：解决冲突 面试题：GitFlow 第四章 面试题框架篇 4.1 区分初中高级的 —— Vue面试题 面试题：Vue2.x 生命周期有哪些？ 1.系统自带八个 2.当一旦进入到某个组件会执行哪些生命周期 3.$el和$data在哪个阶段有 4.如果使用keep-alive会多俩个生命周期 5.如果加入keep-alive第一次进入组件会执行哪些生命周期 6.如果加入keep-alive第二次或者第N进入该组件会执行哪些生命周期 面试题：谈谈你对keep-alive的了解 面试题：v-if和v-show区别 面试题：v-if和v-for优先级 2.x 面试题：ref是什么？ 面试题：nextTick是什么？ 面试题：Vue中如何做样式穿透 面试题：scoped原理 面试题：Vuex是单向数据流还是双向数据流？ 面试题：讲一下MVVM 面试题：双向绑定原理 面试题：什么是虚拟DOM 面试题：key是干什么？ 面试题：diff算法 面试题：Vue组件传值 面试题：props和data优先级谁高？ 面试题：computed、methods、watch有什么区别？ 面试题：Vuex 面试题：Vue路由 面试题：Vue项目打包后出现空白页 4.2 微信小程序面试题 面试题：如何自定义头部？ 面试题：如何自定义底部？ 4.3 uni-app面试题 面试题：生命周期 面试题：条件编译 第五章 面试题性能优化篇

网站搭建框架之vue Vue是web前端快速搭建网站的框架之一。它与jQuery有所不同，是以数据驱动web界面（以操作数据改变页面，而jQuery是以操作节点来改变页面），同时，vue还实现了数据的双向绑定，可及时响应用户的输入。最主要的是vue的写法简单，容易掌握，组件形式可以大大提高工作效率。 对于vue的使用可以分为两种使用形式：1.引入vue.js文件，在js中将vue实例化；2.通过node安装第三方包--vue，搭建脚手架，用脚手架将页面分成几个组件编写，从而利用组件来搭建页面。引入vue.js的写法 Vue分为V层（视图层）和M层（数据层），一般都是由M层的数据来驱动V层的改变。而vue的常用指令数量不多且写法简单。常用的有v-html、v-text、v-show、v-if、v-else、v-for、v-bind:、v-model。v-html和v-text都是将数据写进标签内，但它们的不同之处在于v-text会将标签当做文本内容写入，而v-html则会对标签进行编译，只显示标签内的内容。 至于v-show、v-if、v-else这三个指令都是通过布尔值的判断来执行的，当布尔值为真时，设置了v-show、v-if指令的标签会显示出来，当布尔值为假时，标签隐藏；而v-else与这两个指令相反。除此之外，v-show和v-if、v-else之间也有差别，v-show是改变标签的display属性来使标签显示或隐藏；而v-if、v-else是通过添加或删除节点，来显示或隐藏标签的。 V-for是vue的一种遍历方法，这个方法极大的简化了数组或对象的遍历并显示到页面的步骤而v-bind：是对html属性或自定义属性的数据驱动方式，格式为v-bind:href，可简写为：href。对于类（class）的操作是通过布尔值来判断增加或者隐藏类，同时。类和样式（style）所接受的数据类型为对象。 V-model指令的作用是将数据进行双向绑定，仅限于输入类型标签。当用户在页面输入时，数据层的数据会跟着改变。这是VM模式。由v驱动m。 除了这些普通的指令之外，还有事件指令v-on:，可简写为@+事件名，例如：@click，并将执行函数写到vue的methods中通过脚手架来写项目的话，可用通过写组件，再将组件引入（注册）到另一个vue文件里拼接在一起，从而构建出一个页面。（组件书写格式）（组件整合）（注册路由） 路由是通过vue-router来实现的，在注册路由的时候要将router实例化。不同的路由跳转不同的页面，这是搭建单页面应用的优势。 而父组件与子组件之间的通讯可以通过props将父组件的信息传递给子组件，改变子组件的内容，这样子组件的复用就不会有障碍了，而子组件传递信息给父组件或者其他组件的通讯则需vuex。通过引入vuex并实例化一个Vuex.Store作为一个公共平台，将数据进行传输。通过vue的computed方法接收数据，通过methods方法改变数据。而这个公用平台可以实现组件与组件之间的信息传递，从而实现组件之间的交互。 通过一个星期的实战，深深的体会到了vue的优势，在构建移动端这方面的效率很高。但在搭建的过程中，还是少不了与jQuery结合，毕竟每个工具都有其优点，择其优而用是明智的选择。

本篇文章主要介绍了浅谈AngularJs 双向绑定原理(数据绑定机制)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧那么什么是双向绑定，下面简单进行讲解。首先我们要理解数据绑定。我们看到的网站页面中，是由数据和设计两部分组合而成。将设计转换成浏览器能理解的语言，便是html和css主要做的工作。而将数据显示在页面上，并且有一定的交互效果（比如点击等用户操作及对应的页面反应）则是js主要完成的工作。很多时候我们不可能每次更新数据便刷新页面（get请求），而是通过向后端请求相关数据，并通过无刷新加载的方式进行更新页面（post请求）。那么数据进行更新后，页面上相应的位置也能自动做出对应的修改，便是数据绑定。在以前的开发模式中，这一步一般通过jq操作DOM结构，从而进行更新页面。但这样带来的是大量的代码和大量的操作。如果能在开始的时候，便已经确定好从后端获取的数据到页面上需要进行的操作，当数据发生改变，页面的相关内容也自动发生变化，这样便能极大地方便前端工程师的开发。在新的框架中（angualr，react，vue等）,通过对数据的监视，发现变化便根据已经写好的规则进行修改页面，便实现了数据绑定。可以看出，数据绑定是M(model，数据）通过VM（model-view，数据与页面之间的变换规则）向V（view）的一个修改。而双向绑定则是增加了一条反向的路。在用户操作页面（比如在Input中输入值）的时候，数据能及时发生变化，并且根据数据的变化，页面的另一处也做出对应的修改。有一个常见的例子就是淘宝中的购物车，在商品数量发生变化的时候，商品价格也能及时变化。这样便实现了V——M——VM——V的一个双向绑定。AngularJs 为 scope 模型上设置了一个 监听队列，用来监听数据变化并更新 view 。每次绑定一个东西到 view(html) 上时 AngularJs 就会往 $watch 队列里插入一条 $watch，用来检测它监视的 model 里是否有变化的东西。当浏览器接收到可以被 angular context 处理的事件时，$digest 循环就会触发。$digest 会遍历所有的 $watch。从而更新DOM。$watch这有点类似于我们的观察者模式，在当前作用域$scope下，我们创建一个监控器$watchers和一个监听器$watch，$watchers 负责管理所有的 $watch，当我们每次绑定到UI上的时候就<font color=red>自动</font>创建一个$watch，并把它放到 $watchers。controller.jsapp.controller("MainCtrl", function($scope) { $scope.Hello = "Hello"; $scope.world = "World";});index.html<p>{{Hello}}</p>这里，即便我们在$scope上添加了两个变量，<font color=red>但是只有一个绑定在了UI上，因此在这里只生成了一个$watch</font>$digest当浏览器接收到可以被angular context处理的事件时，$digest循环就会触发。$digest将会遍历我们的$watch，如果$watch没有变化，这个循环检测就将停止，如果有至少一个更新过，这个循环就会再次触发，直到所有的$watch都没有变化。这样就能够保证每个model都已经不会再变化。这就是脏检查(Dirty Checking)机制controller.jsapp.controller("MainCtrl", function() { $scope.name = "Foo"; $scope.changeFoo = function() { $scope.name = "Bar"; }});index.js<p>{{ name }}</p><button ng-click="changeFoo()">Change the name</button>当我们按下按钮浏览器接收到一个事件，进入angular context。$digest循环开始执行，查询每个$watch是否变化。由于监视$scope.name的$watch报告了变化，它会强制再执行一次$digest循环。新的$digest循环没有检测到变化。更新与$scope.name新值相应部分的DOM。$apply$apply 我们可以直接理解为刷新UI。<font color=red>如果当事件触发时，你调用$apply，它会进入angular context，如果没有调用就不会进入，之后的$digest检测机制就不会触发</font>app.directive("clickable", function() { return { restrict: "E", scope: { foo: "=" }, template: "<ul style="background-color: lightblue"><li>{{foo}}</li></ul>", link: function(scope, element, attrs) { element.bind("click", function() { scope.foo++; console.log(scope.foo); }); } }});当我们调用clickable指令的时候，我们可以看到foo的值增加了，但是界面上显示的内容并没有改变。$digest脏检测机制没有触发，检测foo的$watch就没有执行。$apply()方法的两种形式1) 无参$scope.$apply();element.bind("click", function() { scope.foo++; //if error scope.$apply();});当我们使用这种形式的时候，如果在scope.$apply之前程序发生异常，那scope.$apply没有执行，界面就不会更新2) 有参$scope.$apply(function(){ ...})element.bind("click", function() { scope.$apply(function() { scope.foo++; });})如果用这种形式，即使后面的发生异常，数据还是会更新。在 AngularJS 中使用 $watch常用的使用方式：$scope.name = "Hello";$scope.$watch("name", function(newValue, oldValue) { if (newValue === oldValue) { return; } $scope.updated++;});传入到$watch()中的第二个参数是一个回调函数，该函数在name的值发生变化的时候会被调用。如果要监听的是一个对象，那还需要第三个参数：$scope.data.name = "Hello";$scope.$watch("data", function(newValue, oldValue) { if (newValue === oldValue) { return; } $scope.updated++;}, true);表示比较的是对象的值而不是引用，如果不加第三个参数true，在 data.name 变化时，不会触发相应操作，因为引用的是同一引用。总结1) 只有在$scope变量绑定到页面上，才会创建 $watch2) $apply决定事件是否可以进入angular context3) $digest 循环检查model时最少两次，最多10次(多于10次抛出异常，防止无限检查)4) AngularJs自带的指令已经实现了$apply，所以不需要我们额外的编写5) 在自定义指令时，建议使用带function参数的$apply上面是我整理给大家的，希望今后会对大家有帮助。相关文章：在javaScript中如何使用手机号码校验工具类PhoneUtils在微信小程序中如何实现下载进度条在微信小程序中如何使用video组件播放视频在微信小程序中如何使用audio组件在微信小程序中有关功能函数总结（详细教程）

首先要明确 MVVM 是什么，它是 MVC 的衍生架构。无论是 MVC 还是 MVVM 都不是只针对于前端或后端开发的，它们是针对于所有软件开发的架构。 在 MVC 中，Mode 是数据，View 是用户看到的视图，Controller 是处理逻辑。用户触发 Controller（比如后端被http驱动，有一个明显的Control入口，其他场景中也有可能在 View 触发）， Controller 运行逻辑改变 Model，Model 用变动后的数据更新 View 。 MVVM 也被称为 model-view-binder。MVVM 中，VM 是 ViewModel。View 与 ViewModel 之间采用数据绑定，绑定是双向的，避免了开发人员写一些同步 ViewModel 和 View 的重复逻辑。通过数据绑定，View 发生变化会自动反映到 ViewModel，ViewModel 产生的变化也会自动更新 View。 ViewModel 创建了一个视图的抽象，将视图中的状态和行为抽离出来。 在 MVVM 的实现中，还引入了隐式的一个 Binder 层，而声明式的数据和命令的绑定在 MVVM 模式中就是通过它完成的。 Vue 是一个提供了 MVVM 风格的双向数据绑定的框架。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性。 在 Vue 中，Model 和 VM，VM 和 和 View 之间都是双向数据绑定，实现方式是数据劫持。 但是在 Vue 中，哪一部分是 VM，哪一部分是 M，其实不太好区分。如果 Vue 的一个实例是 VM，那么 model 是什么？如果 data 是 model，先经过实例中的逻辑改变 data，然后 view 产生变化又不符合 MVVM。或者说 VM 是 Vue 框架实现数据响应的源码，实例中的逻辑是 model 层的逻辑，用于改变 model 。所以，个人认为 Vue 只能说是有 MVVM 风格的框架，不能说是一个 MVVM 框架。 react，单向数据流。本身只是 一个函数 ui = render (data) 官方就这么简单一个公式。加上状态管理等，可以做 MVVM 风格的开发。 不管是 MVC 还是 MVVM ，具体到实际框架，组成成分之间都不会泾渭分明，几种组成成分之间常常有难以划分的模糊地带。如果忽略划分细节从整体来看，Vue 参考但没有完全遵循 MVVM，React 只是一个 View 层。