前言
Vue.js 是一款流行的前端框架，它的优点在于能够轻松地实现数据的双向绑定，从而提高了开发效率。在 Vue.js 中，指令和计算属性是两个非常重要的概念，它们可以帮助我们更好地掌握 Vue.js 的使用。
指令
指令是 Vue.js 中的一种特殊的 HTML 属性，它们以 v- 开头，用于对 DOM 元素进行操作。指令可以实现很多功能，比如条件渲染、循环渲染、事件处理等等。
条件渲染
在 Vue.js 中，我们可以使用 v-if 指令来实现条件渲染。当指定的表达式为真时，显示该元素，否则不显示。
<div v-if="isShow">我是要显示的元素</div>
除了 v-if，还有 v-else 和 v-else-if 指令可以用来实现条件渲染。
循环渲染
Vue.js 中的 v-for 指令可以很方便地实现循环渲染。我们可以使用 v-for 指令来渲染一个数组，它会自动迭代数组中的每个元素，并将当前元素的值传递给模板。
<ul>
<li v-for="item in list">{{ item }}</li>
</ul>除了数组之外，我们还可以使用 v-for 指令来循环渲染一个对象的属性。
<ul>
<li v-for="(value, key) in obj">{{ key }}: {{ value }}</li>
</ul>事件处理
Vue.js 中的 v-on 指令可以用来绑定事件。我们可以使用 v-on 指令来监听 DOM 事件，并在触发事件时执行相应的方法。
<button v-on:click="handleClick">点击我</button>
除了 v-on:click，还可以使用简写形式 @click 来绑定事件。
计算属性
计算属性是 Vue.js 中的一种特殊属性，它可以根据已有的数据计算出一个新的值，并将该值缓存起来。当数据发生变化时，计算属性会自动重新计算，从而保证了计算结果的正确性。
基本用法
我们可以使用 computed 属性来定义一个计算属性。
-- -------------------- ---- -------
--- -----
----- -
---------- ----
--------- ---
--
--------- -
--------- -------- -- -
------ -------------- - -------------
-
-
--在上面的例子中，fullName 就是一个计算属性，它的值是通过 firstName 和 lastName 计算出来的。
计算属性 vs. 方法
在 Vue.js 中，我们可以使用方法来实现与计算属性类似的功能。但是，计算属性和方法之间有一个重要的区别：计算属性是基于它们的依赖缓存的，只有在它们的依赖发生改变时才会重新计算；而方法则是每次都会重新计算。
-- -------------------- ---- -------
--- -----
----- -
---------- ----
--------- ---
--
--------- -
--------- -------- -- -
------ -------------- - -------------
-
--
-------- -
------------ -------- -- -
------ -------------- - -------------
-
-
--在上面的例子中，fullName 是一个计算属性，而 getFullName 是一个方法。当 firstName 或 lastName 发生改变时，fullName 会自动重新计算；而 getFullName 则需要每次调用时都重新计算。
计算属性 vs. 监听器
在 Vue.js 中，我们还可以使用监听器来实现与计算属性类似的功能。但是，计算属性和监听器之间也有一个重要的区别：计算属性是基于它们的依赖缓存的，只有在它们的依赖发生改变时才会重新计算；而监听器则是在数据发生改变时立即执行。
-- -------------------- ---- -------
--- -----
----- -
---------- ----
--------- ----
--------- --
--
------ -
---------- -------- -- -
------------- - -------------- - -------------
--
--------- -------- -- -
------------- - -------------- - -------------
-
-
--在上面的例子中，fullName 是一个监听器，它会在 firstName 或 lastName 发生改变时立即执行。虽然监听器可以实现与计算属性类似的功能，但是它需要手动设置 fullName 的值，而计算属性则是自动计算出来的。
总结
在 Vue.js 中，指令和计算属性是两个非常重要的概念，它们可以帮助我们更好地掌握 Vue.js 的使用。指令可以实现很多功能，比如条件渲染、循环渲染、事件处理等等；计算属性可以根据已有的数据计算出一个新的值，并将该值缓存起来，从而保证了计算结果的正确性。在实际开发中，我们要根据具体的情况选择合适的指令和计算属性，从而提高开发效率和代码的可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65cf7c4eadd4f0e0ff8b8287