文章目录

• • computed:
  • watch：//侦听器
  • 案例
  • • 用来监听路由的变化

computed:

//计算属性，有缓存
// 这儿的缓存可以理解为页面多次用到，但计算函数只执行了一次
执行时间: 初始化和相关属性发生变化时会再次触发
直接在computed里面定义变量，然后就可以在页面上进行双向数据；
computed比较适合对多个变量或者对象进行处理后返回一个结果值;

优点
简化tempalte里面{{}}计算和处理props或$emit的传值

应用场景
表单校验，这个应用场景应该是比较常见的，利用正则表达式对每个表单项的实时监控，判断表单是否可以提交；
从Vuex Store中收集相关信息，对Vuex中的数据做计算的时候要特别注意computed的缓存属性，在对Vuex中的对象值进行属性修改的时候，并不会触发computed的中值的变化，这时需要Object.assign({},obj)对依赖对象进行跟新返回一个新对象触发依赖跟新。

  computed: {
        computedTest() {
            return this.message + '现在我用的是computed'
        }
}    // computedTest就可以通过{{computedTest}}shiyongle

// 使用get 和 set

computed:{
                username:{
                    // 访问当前属性时调用
                    get(){
                        console.log("get")
                        return this.firstname+" "+this.lastname
                    },
                    // 当前属性变化时调用 val就是变化后的值  在选择框(checkbox)中 val传入的值是选中的状态 true/false
                    set(val){
                        let newnamearr=val.split(" ")
                        this.firstname=newnamearr[0]
                        this.lastname=newnamearr[1]
                    }
                }
            }

watch：//侦听器

1. 不支持缓存，数据变，直接会触发相应的操作；
2.watch支持异步；
//父组件向子组件传递参数，异步监控

props: ["oneList"],
  watch: {
    "oneList": {
      handler(newName, oldName) {
        console.log(newName);   //null
        console.log(oldName)    //undefined
        //   return newName
      },
      deep: true,         // 主要是深度监听对象，数组
      immediate: true,	// 值最初时候watch就执行
    },
  },

3.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
4. 当一个属性发生变化时，需要执行对应的操作；一对多；
5. 监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数.
可以获取属性的新值和旧值。

watch擅长处理的场景：一个数据影响多个数据 ；
应用：监听props，$emit或本组件的值执行异步操作，当执行异步操作时必须用watch而不是computed
查看对象的属性
dir(对象)

案例

用来监听路由的变化

  watch: {
    $route() {
      this.routerId = this.$route.params.id; //获取传来的参数
      // console.log(this.routerId);
      this.getHome();
    },
    },
  },