【Vue】Vue基础问题总结大全，看这个系列就够了！（三）

---

一、method，computed，watch之间的区别

作用机制上

1.watch和computed都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。

2.对methods:methods里面是用来定义函数的，很显然，它需要手动调用才能执行。而不像watch和computed那样，“自动执行”预先定义的函数

【总结】：methods里面定义的函数，是需要主动调用的，而和watch和computed相关的函数，会自动调用,完成我们希望完成的作用

从性质上看

1.methods里面定义的是函数，你显然需要像"fuc()"这样去调用它（假设函数为fuc）

2.computed是计算属性，事实上和和data对象里的数据属性是同一类的（使用上）

例如：

computed:{
    fullName: function () { return  this.firstName + lastName }
}

你在取用的时候，用this.fullName去取用，就和取data一样（不要当成函数调用）

3.watch:类似于监听机制+事件机制：

例如：

watch: {
   firstName: function (val) {  this.fullName = val + this.lastName }
}

val的改变是这个特殊“事件”被触发的条件，而firstName对应的函数就相当于监听到事件发生后执行的方法

一、Vue的生命周期

下面就是如何把这个图片拆分成一段一段的话：

1.创建vue实例：

首先我们创建了一个Vue实例vm，将其挂载到页面中id为“app”的元素上。

2.根组件的beforeCreate阶段：

在调用beforeCreate()函数时，只进行了一些必要的初始化操作（例如一些全局的配置和根实例的一些属性初始化），此时data属性为undefined，没有可供操作的数据。

3.根组件的Created阶段：

调用Created()函数，在这一步，实例已完成以下的配置：数据代理和动态数据绑定(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

4.根组件的beforeMount阶段：

在调用boforeMount()函数前首先会判断对象是否有el选项。如果有的话就继续向下编译，如果没有el选项，则停止编译，也就意味着停止了生命周期，直到在该vue实例上调用vm.$mount(el)，此时只有虚拟的dom，还不能对dom元素进行操作

5.子组件的beforeCreate、Created、beforeMount、Mounted阶段：

在父组件执行beforeMount阶段后，进入子组件的beforeCreate、Created、beforeMount阶段，这些阶段和父组件类似，按下不表。beforeMount阶段后，执行的是Mounted阶段，该阶段时子组件已经挂载到父组件上，并且父组件随之挂载到页面中。

6.子组件的activated阶段：

当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。使用 keep-alive 会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在 activated 阶段获取数据，承担原来 created 钩子函数中获取数据的任务。

7.父组件的mounted阶段:

mounted执行时：此时el已经渲染完成并挂载到实例上。至此，从Vue实例的初始化到将新的模板挂载到页面上的阶段已经完成，此时可以对dom进行操作

8.beforeDestroy和destroyed钩子函数间的生命周期：

beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁（也就是说子组件也会触发相应的函数）。这里的销毁并不指代’抹去’，而是表示’解绑’。销毁时的传递顺序为：父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

三、单向数据流

数据从父级组件传递给子组件，只能单向绑定。

子组件内部不能直接修改从父级传递过来的数据。

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。

这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。

这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

子组件想修改时，只能通过 $emit 派发一个自定义事件，父组件接收到后，由父组件修改。