vue03计算属性过滤器watch

计算属性

我们有时候会在模板中绑定表达式来做简单的数据处理，但是如果表达式太长，就会变得臃肿难以维护。

比如以下代码

<div>
    {
  {text.split(',').reverse().join(',')}}
</div>

表达式里面包含了3个操作，并不是很清晰，有时候可能会更加复杂，所以在遇到复杂的逻辑时，我们应该使用计算属性。上例可以用计算属性进行改写：

<div id="app">
    {
  {reverseText}}
</div>
<script>
	var app = new Vue({
    
        el:"#app",
        data:{
    
            text:"123,456"
        },
        computed:{
    
        /**
         * 函数名（）{
         *  return  值
         * }
         * */
            reverseText:funtion(){
    
            	return this.text.split(',').reverse().join(',');
        	}
        }
    })
</script>

所有的计算属性都以函数的形式写在 Vue 实例内的 computed 选项内，最终返回计算后的结果。

【注意】虽然我们是以函数的形式书写计算属性的，但是在使用时，不能加（）

计算属性的特点

1、计算属性中任意一个实例数据发生变化。计算属性就会重新计算，视图也会更新。

以购物车中的计算总价为例：

<div id="app">
   总价：{
  {total}}
</div>

var app = new Vue({
   
    el:"#app",
    data:{
   
    //data中存放商品列表
        product:[
            {
   
                name:"iphone 12",
                price:"7199",
                num:"2"
            },
            {
   
                name:"LV",
                price:"4888",
                num:"3"
            },
            {
   
                name:"six god",
                price:"100",
                num:"1"
            }
        ]
    },
    computed: {
   
        total: function () {
   
            var price = 0;
            for(var i = 0; i < this.product.length; i++){
   
                price += this.product[i].num * this.product[i].num
            }
            return price;
        }
    }
})

当购买数量或增删商品时，计算属性就会自动更新，视图中的总结也会随之变化。

2、每一个计算属性都包含一个getter和setter

上面的例子都是计算属性的默认用法，只是利用了getter来读取。每调用一次计算属性，就相当于调用一次getter属性；当计算属性的值发生变化时，会默认调用setter属性，进行相应的操作例如

<div id="app">
    {
  {fullName}}
</div>

var vm = new Vue({
   
    el: "#app",
    data: {
   
        firstName: "尼古拉斯",
        lastName: "赵四",
    },
    computed: {
   
        fullName: {
   
        // 只要取值的时候就会调用get
            get: function () {
   
                return this.firstName + "·" + this.lastName
            },
            // 只要修改计算属性的值，就会调用set
          // value就是设置的值。
            set:function (value) {
   
                var arr = value.split("·");
                this.firstName = arr[0];
                this.lastName = arr[1];
            }
        }
    }
})

当我们在控制台执行 app.fullName='弗拉基米尔·普京’时，setter就会被调用。

绝大多数情况下，我们只会用默认的 getter 方法来读取一个计算属性，在业务中很少用到setter,

所以在声明一个计算属性时，可以直接使用默认的写法，不必将getter，setter都声明。

3、计算属性可以依赖多个Vue实例中的数据

<div id="app1