vue computed 传参_Vue

• vue中组件的data为什么是个函数

这是js的特性带来的，跟vue本身设计无关。js本身面向对象编程也是基于原型链和构造函数，应该会注意到原型链上添加一般都是一个函数方法而不会去添加一个对象。

组件是可以被复用的，所以注册了一个组件实际上就是创建了一个组件构造器的引用，而真正当我们使用组件的时候才会去将组件实例化。

若data是个函数的话，每复用一次组件都会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让每个组件实例维护各自的数据。而单纯的写成对象格式，就会使得所有组件实例共用一份data，造成一个变了全都会变的结果。

• MVVM

Model-View-ViewModel。一种设计思想。我的理解：

Model-><script>里用js写的data、methods

View-><template>和<style>里的内容，也就是页面的html和css

VM->v-model双向数据绑定，把V和M连接了起来，之间的同步工作完全自动，无需人为干涉，使开发者只需关注业务逻辑，不需手动操作DOM和关注数据状态的同步问题。（Vue还监控data对象的变化，并在数据变化时更新dom）

MVVM解决了MVC中大量的DOM操作使页面渲染性能降低，加载速度变慢从而影响用户体验等问题，通过数据来显示视图层而不是节点操作，在数据操作比较多的场景里更加便捷。

• 父子组件传值

父组件向子组件传值：父组件通过标签上面定义传值，子组件通过props方法接收数据。

子组件向父组件传值：子组件通过$emit方法传递参数。

• vue指令

v-if：判断是否隐藏

v-show：判断是否隐藏

v-for：数据循环

v-bind：绑定一个属性

v-model：双向数据绑定

易混点：

①v-show和v-if的区别

v-show是通过修改元素的display:hidden的css属性让其显示or隐藏，适用于频繁切换但会有初始渲染开销。

v-if是直接销毁和重建DOM来达到让元素显示&隐藏的效果，适用于运行时条件很少改变的情况，但会有切换开销。

②v-if和v-for不要一起使用：

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环。所以，不推荐v-if和v-for同时使用。

解决方法：将if添加到父元素上，或者使用computed属性

vue中v-if和v-for指令最好不要同时使用 - reaf - 博客园​www.cnblogs.com

• key

①为了高效的更新虚拟DOM

②当使用相同标签名的元素切换时，需要通过key特性设置唯一的值来标记以让vue区分它们。

vue中：key的作用​www.jianshu.com

VUE中演示v-for为什么要加key​www.jianshu.com

• 生命周期

①什么是Vue生命周期

Vue实例从创建到销毁的过程。开始创建->初始化数据->编译模板->挂载DOM->渲染、更新->渲染、卸载

②Vue生命周期的作用

生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

③生命周期有哪几个阶段（8个）

创建前后：

beforeCreate：数据还未挂载，Vue实例的挂载元素el和数据对象data都为undefined，还未初始化。（可以在此加loading事件，在加载实例时触发）

Created：Vue实例的数据对象data有了，el还没有。（在此结束loading事件，异步请求也适宜在这里调用）

载入前后：

beforeMount：虚拟DOM创建完成，Vue实例的$el和data都初始化了，但还为虚拟的DOM节点，data.message还未替换。

Mouted：Vue实例挂载完成，组件出现在页面中，数据和真实DOM都已经处理好了，获取到DOM节点。data.message成功渲染。

更新前后：（data变化时）

beforeUpdate：重新渲染之前触发，Vue的虚拟DOM机制会重新构建虚拟DOM与上一次的虚拟DOM树利用diff算法进行对比之后重新渲染。这里不能更改数据，否则会陷入死循环。

Updated：数据已更改完成，DOM也重新render完成。这里不能更改数据，否则会陷入死循环。（对数据统一处理函数可写在此）

销毁前后：

beforeDestroy：一般在这里善后如清除计时器、清除非指令绑定的事件等。（可以做一个确认停止事件的确认框）

Destroyed：执行后对data的改变不会再触发周期函数，此时Vue实例已经解除了事件监听以及和DOM组件的数据绑定，但DOM结构依然存在。这里也可善后。

④第一次页面加载会触发哪几个钩子

beforeCreate、Created、beforeMount、Mouted

⑤DOM渲染在哪个周期中就已经完成

Mounted

• watch和computed的区别

computed :

1. 支持缓存，只有依赖数据发生改变，才会重新进行计算
2. 不支持异步
3. 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed

watch：

1. 不支持缓存，数据变，直接会触发相应的操作；
2.支持异步；
3.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
4. 监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，

当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

• 路由传值

vue路由传参的三种基本方式​www.jianshu.com