小知识，大挑战！本文正在参与“程序员必备小知识”创作活动
本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

点了关注的你特别好看🤗

计算属性（computed）

在模板中放入太多的逻辑会让模板过重且难以维护，因此对于任何复杂逻辑，都应当使用计算属性。

栗子🧨：

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

结果：

Original message: "Hello"

Computed reversed message: "olleH"

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。

🏷计算属性和方法区别

计算属性是基于它们的响应式依赖进行缓存的。这就意味着只要 message 还没有发生改变，多次访问reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

而使用methods，触发重新渲染时，函数会重新调用执行。

可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。

🖱计算属性的setter

每一个计算属性都包含一个 getter 函数和 setter 函数；
计算属性会默认使用 getter 函数；
你也可以提供 setter 函数，当修改计算属性的值时，就会触发 setter 函数，执行一些自定义的操作。

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

侦听器（watch）

当需要在数据变化时执行异步（如：访问一个 API）或开销较大的操作时，这个方式是最有用的。

栗子🧨：具体可见侦听器

watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer()
    }
  },

🖥计算属性和侦听器的区别

watch是观察某一个属性的变化，重新计算属性值，只监听指定的变量的值。computed是通过所依赖的属性的变化重新计算属性值。大部分情况下watch和computed几乎没有差别。但如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择。当你有一些数据需要随着其它数据变动而变动时，最好用计算属性而不是watch回调

v-if和v-show区别

1、v-if只有在判断为true的时候才会对数据进行渲染，false的时候把包含的代码进行删除。除非再次进行数据渲染，v-if才会重新判断。可以说是用法比较倾向于对数据一次操作。 2、v-show是无论判断是什么都会先对数据进行渲染,只是false的时候对节点进行display:none;的操作。所以再不重新渲染数据的情况下，改变数据的值可以使数据展示或隐藏。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-for

♠ 用 `v-for` 把一个数组对应为一组元素

用 v-for 基于一个数组来渲染一个列表，v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是数组里的各个元素。

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

结果：
    Foo
    Bar

在 v-for 块中，可以访问所有父作用域的 property。v-for 还支持一个可选的第二个参数，即当前项的索引。大多使用index （序号）来标记。

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

结果：
	Parent-0-Foo
	Parent-1-Bar
Parent 为父作用域里的，可供整个组件使用。

♣ 在 `v-for` 里使用对象

v-for也可以来遍历一个对象的属性（值，键名name/key都可以，索引），加括号不加括号都可

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

结果：
	 How to do lists in Vue
     Jane Doe
     2016-04-10

你也可以提供第二个的参数为 property 名称 (也就是键名)：

<div v-for="(value, name) in object">
  {{ name }}: {{ value }}
</div>

结果：
	title:How to do lists in Vue
    author:Jane Doe
    publishedAt:2016-04-10

还可以用第三个参数作为索引：

<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

结果：
	0.title:How to do lists in Vue
    1.author:Jane Doe
    2.publishedAt:2016-04-10

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute：

<div v-for="item in items" v-bind:key="item.id">
  <!-- 内容 -->
</div>

🚩不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。

`<router-link>`和`<a>`区别

<a> 标签定义超链接，用于从一张页面链接到另一张页面，违背了多视图的单页Web应用这个概念，通过a标签进行跳转，页面会被重新渲染，即相当于重新打开一个新的网页，体现为视觉上的“闪烁”（如果是本地的项目基本看不出来）
<router-link> 跳转不会跳转到新的页面，也不会重新渲染，它会选择路由所指的组件进行渲染，避免了重复渲染的“无用功”，它只更新变化的部分从而减少DOM性能消耗

有问题欢迎交流哦~ 欢迎关注同名公主号：昕之一方

参考资料:vue文档

vue基础||奇怪的知识vue增加了