本文目录
vue计算属性与监听属性的区别
定义： 要用的属性不存在，需要通过已有属性计算得来。
原理： 底层借助了Objcet.defineproperty()方法提供的getter和setter。
get函数什么时候执行？
1）初次读取时会执行一次
2）当依赖的数据发生改变时会被再次调用
优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便
备注：
1）计算属性最终会出现在vm上，直接读取使用即可
2）如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变
3）如果计算属性确定不考虑修改，可以使用计算属性的简写形式
1、当被监视的属性变化时，回调函数自动调用，进行相关操作
2、监视的属性必须存在，才能进行监视
3、监视有两种写法：
1）创建Vue时传入watch配置
2）通过vm.$watch监视
深度监视：
Vue中的watch默认不监测对象内部值的改变（一层）
在watch中 配置deep:true可以监测对象内部值的改变 （多层）
备注：
Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
使用watch时根据监视数据的具体结构，决定是否采用深度监视
简写：
computed和watch之间的区别：
computed能完成的功能，watch都可以完成 （可能写起来更复杂）
watch能完成的功能，computed不一定能完成 ，例如：watch可以进行 异步操作 （定时）
两个重要的小原则：
1） 所有被Vue管理的函数，最好写成普通函数 ，这样this的指向才是 vm 或 组件实例对象
2） 所有不被Vue所管理的函数 （定时器的回调函数、ajax的回调函数等、Promise的回调函数）， 最好写成箭头函数 ，这样this的指向才是vm 或 组件实例对象。
vue的实现原理怎么回答
一、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
vue计算属性和watch的区别
计算属性:computed
在一个计算函数里可以完成各种复杂的逻辑，包括运算、函数调用等；
如：computed：{
reversedText:function(){
return this.text.split(',').revetse().join(',');
}
}
可以直接在<div>{{reversedText}}</div>调用；
依赖于text更新。text发生改变reversedText才发生改变；
虽然在methods里写一个方法也可以起到同样的作用；
但是计算属性是基于它的依赖缓存的；依赖不变计算属性就不会发生改变会缓存下拉；
就是说同一个界面多个地方调用了这个reversedText；如果text不是效应式依赖；
reversedText是写methods中的方法，那么只要重新渲染，调用方法函数就会执行；重新计算；
reversedText是计算属性那么就不需要重新计算；
说说计算属性的setter 和 getter；
get 是用于读取
set是用于写入触发；
比如你在一个方法中触发了这个计算属性，给它赋值，那么就会触发set里面的方法；
然后watch监听的是你定义的变量,当你定义的变量的值发生变化时，调用对应的方法。
watch:{
text:function () {
this.msg="dajiahao"
}
}
text发生改变 调用相应的方法
watch和computed的区别及用法是什么
一、表达意思不同
1、watch：看，注视；观看（电视节目、比赛等）；关注；照看，守护；当心，留意；监视；表，手表；观察，监视； 警卫队，治安队；警戒时间。
2、computed：计算的，使用计算机的；计算，估算（compute 的过去式和过去分词）。
二、用法不同
1、watch：watch sb doing sth . 表示看到某人正在做某事；watch sb do 看到某人做某事的全部过程。
2、computed：通常在句中作形容词和动词，修饰主语或宾语。
例句：
1、Inside the box was a gold watch.
盒子里装着一只金表。
2、He looked theatrically at his watch.
他夸张地看了看表。
3、There're some things that cannot be computed.
总会有一些无法计算的东西。
以上就是关于watch computed区别 ,vue计算属性与监听属性的区别的全部内容，以及watch computed区别 的相关内容,希望能够帮到您。
