11.Vue小小结

1. Vue实例：每个 Vue 应用程序都是通过 Vue 函数创建出一个新的 Vue 实例开始的

image.png

在创建一个 Vue 实例时，你会传入一个选项对象(options object)

选项对象：一般地，当模板内容较简单时，使用data选项配合表达式即可。涉及到复杂逻辑时，则需要用到methods、computed、watch等方法。

2. Vuejs中关于computed、methods、watch的区别

• computed：计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例；

• methods：methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例；

• watch：是一种更通用的方式来观察和响应 Vue 实例上的数据变动。一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

通俗来讲：

1.computed是在HTML DOM加载后马上执行的，

2.如赋值；而methods则必须要有一定的触发条件才能执行，如点击事件；

3.watch呢？它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。

所以他们的执行顺序为：默认加载的时候先computed再watch，不执行methods；等触发某一事件后，则是：先methods再watch。

computed可以添加很多实例属性，这些属性可以通过实例直接获取到，是通过将作用函数作为属性的getter，通过访问属性就能调用getter来返回值 所以使用的是属性，而不是属性声明的函数；

image.png

所以在上面代码中模板中computedde调用的是属性所以不带括号，而methods定义的是方法所以在使用的时候要加 ( ) ；computed 属性会基于它所依赖的数据进行缓存

computed中属性定义的时候，若只定义一个函数则默认为getter函数, 若要定义setter可以使用{}声明多个属性方法

image.png

调用setter函数的方法是vm.newProperty = 'newValue' 直接参数赋值即可

3. 在 <template> 上使用 v-if 进行条件分组

由于 v-if 是一个指令，因此必须将其附加到一个单独的元素上。但是如果我们想要切换多个元素，可以将 <template> 元素，作为多个元素的无形容器(invisible wrapper)，然后在这个容器上使用 v-if。最终渲染结果将不会包含 <template>元素。

image.png

v-else 元素必须紧跟在 v-if 或 v-else-if 元素之后 - 否则无法识别它。

image.png

v-else-if，顾名思义，就是 v-if 之后的“else-if 块”。可以多次链式地调用，和 v-else 类似，v-else-if 元素必须紧跟在 v-if 或 v-else-if 元素之后。

4. 使用 props 向子组件传递数据，使用 events 向父组件发送消息

5.与 components 和 props命名可以自动转换，但触发的事件名称必须与监听时的名称完全匹配，建议总是使用串联式命名(kebab-cased)来命名事件名称

6. 通过调用全局方法 Vue.use() 使用插件

7. vue1中，el属性可以是标签，id；然而2.0却只能用id,并且body内部的id （Vue2.0在业务里面对HTML，body标签做了限制）

8. el，template，render属性优先性：

当Vue选项对象中有render渲染函数时，Vue构造函数将直接使用渲染函数渲染DOM树，当选项对象中没有render渲染函数时，Vue构造函数首先通过将template模板编译生成渲染函数，然后再渲染DOM树，而当Vue选项对象中既没有render渲染函数，也没有template模板时，会通过el属性获取挂载元素的outerHTML来作为模板，并编译生成渲染函数。 换言之，在进行DOM树的渲染时，render渲染函数的优先级最高，template次之且需编译成渲染函数，而挂载点el属性对应的元素若存在，则在前两者均不存在时，其outerHTML才会用于编译与渲染

9.

image.png

10.vue文件中 在methods中的方法中通过this调用的方法，如this.addNum(this.choosedId)是action中的方法，action中的addNum中又通过commit调用了mutations的方法，mutations中的方法就会去改变store中的数据，从而导致组件重新渲染

image.png image.png image.png image.png

11. Mulation相当于芝士网使用的reat，redux，redux-saga中的reducer

12. Action的commit（.vue文件中this.$store.commit('REMBER_TIME');） 就像saga中的 yield put(onRequestDataSuccess({json, orderList}));