2019-06-26 Vue.js

2019-06-26

一、  计算属性和侦听器

模板内可以写表达式，但是在模板中放入太多的逻辑会让模板过重且难以维护，所以当涉及到复杂的逻辑运算时，应当使用计算属性。

    1.计算属性 

      计算属性写computed属性中。eg: 在下图代码中，我们声明了一个计算属性 reverseText，使用计算属性时像绑定普通属性一样在模板中绑定计算属性即可。

     计算属性是函数，它有依赖，vm.title,当vm.title改变时，所有依赖vm.title的绑定都会更新。有缓存，当响应式依赖不变化时则不会计算。即 ： 计算属性是基于他们的响应式依赖进行缓存的。只有相关的响应式依赖发生改变时才会重新进行计算。如果没有改变则会立即返回之前的计算结果，而不再次执行函数。

eg:下面定义的计算属性将不会再更新，因为 Date.now()不是响应式依赖。

   2.方法

    可以发现 通过methods组件中定义的方法，并在表达式中调用可以实现同样的效果。只需在使用时进行调用即可。

eg:此时我们定义的是一个方法而不是一个计算属性，不会基于依赖进行缓存。每当触发重新渲染时，调用的方法总会再次执行函数。

    3.侦听属性

       Vue提供了侦听属性来观察和响应Vue实例上的数据变动，侦听属性写在watch中。eg:

  

上面代码是命令式且重复的，同样的需求使用计算属性更优。下面用计算属性来写：

 4. 总结：

4.0、computed methods watch 的使用场景

computed :

-   当依赖某些状态（state）产生新值的时候，优先选择使用 computed

methods:

-    定义事件响应函数

-    定义组件公共处理函数

watch :

-   用来解决 beforeUpdate, updated ，两个钩子里修改状态导致死循环的问题

-    检测可能异步改变值得时候

4.1.   computed和methods的区别：

相同点： 1. 如果作为模板的数据显示，二者都可以实现相同的功能。

不同点： 1.methods定义的方法需要执行,而使用计算属性时像绑定普通属性一样在模板中绑定计算属性即可。

2. computed会基于依赖的响应数据缓存，methods不会，在模板渲染时就会调用。

     diff之前会先看data里的数据是否发生变化，如果没有发生变化computed的方法不会执行，但methods里的方法会执行。

-  computed必须返回一个值页面绑定的才能取得值，而methods中可以只执行逻辑代码，可以有返回值，也可以没有。

 

4.2、computed和watch的区别：

1. 相同点：如果做信息展示二者可以实现同样的功能，不同的是watch可能需要监听更多属性。在这个时候我们优先选择computed

2.不同点：-当想在更新data数据后再次更新数据的时候，不能使用updated生命周期钩子，建议使用watch来监听data里数据的变化
- 使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

4.3、 如何使模板重新渲染

1. 改变data中的数据，就会可能触发模板渲染

2. 如果经过diff算法比较，发现更新前的虚拟DOM和更新后的虚拟DOM相同就不会渲染。

5、 侦听器

二、class与style绑定

 1. 绑定HTML Class

    使用 v-bind来将class列表和内联样式进行绑定，在这里v-bind可以传入的表达式类型有字符串、对象或数组。

    1. 给 v-bind 传入一个对象来动态的切换  class，eg: active这个class是否存在取决于数据属性 isActive的真假。

     2.可以把一个数组传给 v-bind:class，以应用一个 class 列表：

2.绑定内联样式

    1.对象语法

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式

(camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：

2. 数组语法

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上。

3.多重值

4.具体例子---->下一篇

三、 条件渲染和列表渲染

1.条件渲染

        v-if 指令用于条件性的渲染一块内容。这块内容只有在指令表达式为true时才会被渲染。也可用 v-else添加一个 'else'块。

v-if 和v-else 之间不可以有其他元素，否则会隔断else,则不起作用。且v-if是一个指令，必须将它添加到一个元素上。

所以，当想在v-if下渲染多个元素需要如何操作呢？

    可以使用<template>元素当做不可见的包裹元素，并在上面使用v-if条件。在浏览器端渲染时不会出现<template>元素。eg:

1.2  v-show

v-show也是根据条件展示元素的指令。与v-if不同的是，带有v-show的元素始终会被渲染并保留在DOM中。只是简单的通过切换CSS的display属性来变换是否显示。当v-show指令中的条件不满足时，相应的元素display属性为 none.

PS:

1.3  v-if   VS   v-show

1.4   v-if 与 v-for 同时使用在同一元素时，v-for优先级更高。不推荐同时使用这两个指令。

2.列表渲染

2.1   基于数组来渲染一个列表

    v-for 指令需要使用 item in items形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

在 v-for 块中，我们可以访问所有父作用域的属性。v-for 还支持一个可选的第二个参数，即当前项的索引。、

也可以用 of 代替 in 作为分隔符。

2.2 在v-for中使用对象

 1. 可以遍历一个对象的属性

2.可以提供第二个参数作为为property名称（键名）

3. 可以提供第三个参数作为索引：

3.数据更新检测

4.事件处理

5.表单的输入绑定

https://cn.vuejs.org/v2/guide/forms.html