【VueJS】深入理解 computed 和 methods 方法

╰+攻爆jí腚メ 2022-06-02 04:07 467阅读 0赞

# 前言 #

模板内的表达式是非常便利的，但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

<div id="example"> { { message.split('').reverse().join('') }} </div>

--------------------

# computed 方法 #

所以引入了**计算属性computed**,将复杂的逻辑放入计算中进行处理，同时computed有缓存功能，防止复杂计算逻辑多次调用引起的性能问题。

> 在Vue中有多种方法为视图设置值：
> 
>  *  使用指令直接将数据值绑定到视图
>  *  使用简单的表达式对内容进行简单的转换
>  *  使用过滤器对内容进行简单的转换
> 
> 除此之外，我们还可以使用计算属性根据数据模型中的值或一组值来计算显示值。

## 版本区别 ##

*  Vue1.x版本中，computed属性存在bug
 *  Vue2.x版本中，修复了computed属性的此bug

### 在Vue1.x版本中 ###

computed属性是一个大坑

如果我们在computed里声明的对象与data中的重名了，就会污染原来的数据源，这是Vue不允许的，所以你要重新声明一个对象。

<body> <h1>Vue 排序</h1> <hr> <div id="app"> <ul> <li v-for="item in items"> // 注意对比这里 { { item}} </li> </ul> </div> <script> var app = new Vue({ el: '#app', data: { items:[20,23,18,65,32,19,55,54,56,41] }, computed: { items:function(){ // 注意对比这里 return this.items.sort(); } } }) </script> </body>

上例中在Vue1.x版本中是有问题的，不会渲染出排序的数据。下面是重命名过后的

<body> <h1>Vue 排序</h1> <hr> <div id="app"> <ul> <li v-for="item in sortItems"> // 注意对比这里 { { item}} </li> </ul> </div> <script> var app = new Vue({ el: '#app', data: { items:[20,23,18,65,32,19,55,54,56,41] }, computed: { sortItems:function(){ // 注意对比这里 return this.items.sort(); } } }) </script> </body>

> 注意：computed中的属性和data中的属性名字不能相同，一个属性要么在data里；要么在computed里，computed里的属性要跟data中的配合使用，当data属性发生变化时才会调用getter方法更新computed里绑定的值，否则getter方法即使返回一个随机数，computed里绑定的值也不会变。  
> 我们以声明的方式创建了这种依赖关系：计算属性的 getter 是没有副作用，这使得它易于测试和推理。

### 在Vue2.x版本中 ###

data中的对象与computed中的对象重名不会报错，并能正常渲染。

但深层原理是什么，还有待进一步深入理解…

关于sort()方法排序问题，这不是Vue的问题，而是JavaScript的问题。如有问题请跳转 [【JavaScript】JS中的数组数字排序][JavaScript_JS]

> computed 的作用主要是对原数据进行改造输出。  
> 改造输出：包括格式的编辑，大小写转换，顺序重排，添加符号等。

1）顺序重排的简单例子

<div id="example"> <p>Original message: "{ { message }}"</p> <p>Computed reversed message: "{ { reversedMessage }}"</p> </div> <script> var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // a computed getter reversedMessage: function () { // `this` points to the vm instance return this.message.split('').reverse().join('') } } }) </script>

运行结果

Original message: "Hello"
    Computed reversed message: "olleH"

2）格式编辑的简单例子

<div id="app">{ { newPrice}}</div> <script> new Vue({ el: "#app", data: { price: 2 }, computed: { newPrice: function(){ return this.price = "¥ "+this.price+"元" } } }) </script>

运行结果

¥ 2元

## computed的缓存作用 ##

**计算属性**只有在其依赖的值发生改变的时候才会出发进行再次计算，相当于一个**缓存的作用**。这样设计的好处是如果我们维护了一个很大的变量时，并且另一个计算属性依赖于这个变量，此时我们不可能每一次都去读取这个变量，更科学的办法是当被依赖属性发生改变时触发事件。这种科学的**做法类似cache的设计理念。**

--------------------

# methods 方法 #

## methods中参数的传递 ##

<div id="app"> { { a }} <p><button @click="add(2)">add</button></p> </div> <script type="text/javascript"> var app = new Vue({ el:'#app', data:{ a:1 }, methods:{ add:function(num){ if(num!=''){ this.a+=num }else{ this.a++ } } } }) </script>

## .native 给组件绑定构造器里的原生事件 ##

在实际开发中经常需要把某个按钮封装成组件，然后反复使用。

如何让组件调用构造器里的方法，而不是组件里的方法。就需要用到我们的.native修饰器了。

首先 声明 btn 对象：

并在咱们之前的构造器里声明组件

components:{
        "btn":btn
     }

最后再用.native修饰

完整代码

<div id="app"> { { a }} <p><button @click="add(2)">add</button></p> <p><btn @click.native="add(3)"></btn></p> </div> <script type="text/javascript"> var btn={ template:`<button>组件Add</button>` }; var app = new Vue({ el:'#app', data:{ a:1 }, components:{ "btn":btn }, methods:{ add:function(num){ if(num!=''){ this.a+=num }else{ this.a++ } } } }) </script>

## 作用域外部调用构造器里的方法 ##

<button onclick="app.add(4)" >外部调用构造器里的方法</button>
    // 这里的app对应构造器var app = new Vue({
       ...})

--------------------

# computed的缓存作用 vs method方法 #

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

*  计算属性缓存依赖于数据模型中的属性，如果模型中的属性不改变它的缓存就不改变，如果数据模型中的属性发生改变则再计算一遍
 *  method方法不管你数据模型中的属性是否改变都有执行

--------------------

更新于 2018/7/26

环境：Vue.js v2.5.17-beta.0

有问题的代码：

<h1>v-for指令用法</h1> <hr> <div id="app"> <ul> <li v-for="item of sortItems"> { { item}} </li> </ul> </div> <script> var app = new Vue({ el: '#app', data: { items: [20,23,18,65,32,19,56,41], }, computed: { sortItems: function() { return this.items.sort(); }, } }) </script>

报错截图：  
![这里写图片描述][70]

没问题的代码：

<h1>v-for指令用法</h1> <hr> <div id="app"> <ul> <li v-for="item of sort(items)"> { { item}} </li> </ul> </div> <script> var app = new Vue({ el: '#app', data: { items: [20,23,18,65,32,19,56,41], }, methods: { sort: function(items) { return items.sort(); } } }) </script>

效果截图：

![这里写图片描述][70 1]

[JavaScript_JS]: http://blog.csdn.net/u013451157/article/details/78504314
[70]: /images/20220602/849da24c9eef4520bbffa75657713b81.png
[70 1]: /images/20220602/717a7180a29c47af9bdedcc4eade47fc.png