ref

ref定义在普通的元素上，作用是获取当前的dom元素。ref定义在组件上，作用是获取当前组件的vue实例（可以获取到子组件中的数据）。

计算属性

计算属性 用来存储和处理数据 在模板中放入太多的逻辑 让模板重且难以维护

<template>
  <div>
  <div>
      张三购买-套餐A 
      <p>
        -单价<input type="number" v-model="info.price" />
      </p>
      <p>
        -数量<input type="number" v-model="info.count" />
       </p>
      <p>
        -配送费<input type="number" v-model="info.freight" />
      </p>
      <p>
        -折扣{{info.sale}}
      </p>
      <p>
        -总价：{{info.price*info.count*info.sale+info.freight}}
         -总价：{{total}}
      </p>

      <p>修改计算属性的值</p>
      <p>计算属性:{{num}}</p>
      <button @click="change()">修改</button>
  </div>
  </div>
</template>

<script>
export default {
  name: 'Demo',
  data () {
    return {
      title:'计算属性',
      info:{
        price:20,
        count:1,
        sale:0.8,
        freight:5
      },
      n:0
    }
  },
  computed:{  //计算属性
      total(){
        if(this.info.count >5){
          return this.info.price*this.info.count*this.info.sale
        }else {
          return this.info.price*this.info.count*this.info.sale+this.info.freight
        } 
      },
      // num(){
      //   return 100
      // },
      num:{
        //读取一个变量时会触发get方法
        get:function(){
          return this.n;
        },
        //计算属性触发会执行set方法
        set:function(val){
          this.n = val;
        }
      }
  },
   methods:{
     change(){
       this.num = 1000;  //计算属性不能直接修改
     }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
复制代码

$set

$set 的作用：改变新增属性时，不会触发视图更新

export default {
  name: 'Demo',
  data () {
    return {
      user:{
        name:'abc'
      }
    }
  },
   methods:{
     query(){
       console.log(this.user);
       //this.user.age = 18;  //新添加属性，页面不会渲染
       this.$set(this.user,'age',18);
     },
     del(){
       console.log(this.user);
       // delete this.user.age; //删除页面不会渲染
        this.$delete(this.user,'age');
     }
  }
}
复制代码