文章目录
- 一：Vue响应式原理
- 二：V-model的响应式原理
- 三：methods和computed 实现的区别
-
四：watch和computed的区别
-
五：v-show 和v-if的区别
-
六：Vue中的虚拟DOM
-
七：key值的作用
-
八：过滤器与计算属性的区别
-
九：过滤器与方法的区别
-
十：Vue生命周期
-
十一：MVVM
-
总结
一：Vue响应式原理
vue 在实例化的时候，使用 Object.defineProperty() 方法或 Proxy 构造函数，对 data 进行 getter 和 setter 的处理。在组件渲染时，若用到 data 里的某个数据，这个数据就会被依赖收集进 watcher 里。当数据更新，如果这个数据在 watcher 里，就会收到通知并更新，否则不会更新——vue 采用“数据劫持”+“观察者模式（发布者-订阅者模式）”相结合的方式实现了双向绑定——vue 的响应式原理
二：V-model的响应式原理
其原理核心是，一方面modal层通过defineProperty来劫持每个属性，一旦监听到变化通过相关的页面元素更新。另一方面通过编译模板文件，为控件的v-model绑定input事件，从而页面输入能实时更新相关data属性值。
v-model是vue的一个语法糖,通过v-bind去单项绑定vue实例里面的data数据，然后再通过各种事件比如@change @input等去进行触发事件,从而达到修改实例数据的值
三：methods和computed 实现的区别
1：调用方式不同前者用{ {xxx()}}(函数调用),后者用{ {xxx}}(属性访问)。
2：computed数据是响应式的，如果数据层的值变了，computed就会实时更新到视图层上。
3：主要区别：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。methods得到属性，里面函数都会在执行一遍。
四：watch和computed的区别
计算属性是依赖的值改变后重新计算结果更新DOM，会进行缓存。
属性监听的是属性值，当定义的值发生变化时，执行相对应的函数。
最主要的用途区别：
计算属性不能执行异步任务。计算属性一般不会用来向服务器请求或者执行异步任务，因为耗时可能会比较长，我们的计算属性要实时更新。所以这个异步任务就可以用监听属性来做。
总之一句话：computed能实现的，watch都能实现，computed不能实现的，watch也能实现。
五：v-show 和v-if的区别
·v-if 是移除 v-show是隐藏
·v-if 适合切换频率比较低的场景 v-show 频繁切换适用v-show
六：Vue中的虚拟DOM
什么是虚拟dom？
虚拟dom本质上就是一个普通的JS对象，用于描述视图的界面结构
在vue中，每个组件都有一个render函数，每个render函数都会返回一个虚拟dom树，这也就意味着每个组件都对应一棵虚拟DOM树
为什么需要虚拟dom？
在vue中，渲染视图会调用render函数，这种渲染不仅发生在组件创建时，同时发生在视图依赖的数据更新时。如果在渲染时，直接使用真实DOM，由于真实DOM的创建、更新、插入等操作会带来大量的性能损耗，从而就会极大的降低渲染效率。减少频繁操作DOM，提高效率
因此，vue在渲染时，使用虚拟dom来替代真实dom，主要为解决渲染效率的问题。
虚拟dom是如何转换为真实dom的？
在一个组件实例首次被渲染时，它先生成虚拟dom树，然后根据虚拟dom树创建真实dom，并把真实dom挂载到页面中合适的位置，此时，每个虚拟dom便会对应一个真实的dom。
如果一个组件受响应式数据变化的影响，需要重新渲染时，它仍然会重新调用render函数，创建出一个新的虚拟dom树，用新树和旧树对比，通过对比，vue会找到最小更新量，然后更新必要的虚拟dom节点，最后，这些更新过的虚拟节点，会去修改它们对应的真实dom
这样一来，就保证了对真实dom达到最小的改动。我们只需要交换位置即可。
七：key值的作用
作用：
key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,
随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较。
规则：
· 旧虚拟DOM中找到了与新虚拟DOM相同的key，判断内容改变了就生成新的虚拟DOM使用，没有改变就使用旧的虚拟DOM。
· 如果没找到相同的key就直接生成新的虚拟DOM。
使用：
如果对列表不需要排序可以使用index，但实际开发中，常用作为key的一般为唯一标识：如id，手机号，身份证号等。(唯一标识)
无key：原地复用，B1更新为B2，B2更新为B1.
存在key的情况下，直接交换位置。
八：过滤器与计算属性的区别
计算属性：
依赖于一个固定的vue实例 ，要在某一个实例中使用
不接受额外参数，依赖于data属性中的变量
有缓存管理机制，可减少页面调用次数
计算属性被作为一个类属性调用
过滤器：
不依赖于实例。可以定义一个全局过滤器，在多个实例中使用
不要求是data中的变量，可以是临时变量。可接受额外参数。
无缓存机制，调用次数，取决于页面中有所多少过滤器
只能读取操作，过滤器被作为一个特殊方法处理，过滤器被当做一个特殊的函数。
九：过滤器与方法的区别
filter：内容格式化，将输入的数据，按照某种规则进行输出，从这一层讲，感觉叫 formatter 可能更合适；
method：数据、交互等的逻辑处理，相对 formatter 的功能更纯粹，一般结合“数据驱动”的理念，尽量不直接操作 DOM；
十：Vue生命周期
什么是生命周期？
Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。
生命周期的作用？
它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
生命周期总共有几个阶段？
8个阶段，钩子函数如下：
beforeCreate(创建前)
created(创建后)
beforeMount(载入前)
mounted(载入后)
beforeUpdate(更新前)
updated（更新后)
beforeDestroy(销毁前)
destroyed（销毁后)
初始化阶段会调用哪些钩子？
会触发 下面这几个beforeCreate, created, beforeMount, mounted 。
DOM渲染在哪个阶段已经完成？
DOM 渲染在 mounted 中就已经完成了。
created和mounted的区别？
created：调用时，此时模板还未渲染，不能操作DOM，主要用来初始化数据；
mounted：调用时，此时模板已经渲染成html，可以操作DOM。
- 数据和页面尚未同步—— beforeUpdatad
- 数据和页面已经同步—— Updated
十一：MVVM
MVVM模式（全称为Model-View-ViewModel）为Vue实现数据双向绑定。
在MVVM中，View为视图层，ViewModel为业务逻辑层，Model为数据层。
数据双向绑定：
当用户使View变化时（如填写表单），变化会自动同步到ViewModel处理相应逻辑，并将变化更新到Model数据库。
反之，若服务端数据变化（如股价波动），变化会自动同步到ViewModel处理相应逻辑，并将变化同步到View展现给用户。
在用Vue之前，完成HTML和JS之间的交互需要使用大量的DOM操作来实现动态加载。
MVVM的数据双向绑定减少了DOM操作，更高效地实现了视图和数据的交互。同时，MVVM使界面、交互和数据层分离，便于设计人员负责设计界面，后端开发人员提供数据接口，而前端开发人员专注于业务交互逻辑的实现。
总结
以上就是今日所要分享的内容，希望对你有所帮助吧，最后，依旧诚挚祝福屏幕前的你健康快乐、平安喜乐~