vue使用心得记录

父组件与子组件之间传递数据的方法

这里介绍一些非常规的(骚)操作，不推荐使用，但是用了之后会很爽。
1.使用$ref
当父组件中为子组件声明了ref属性时，父组件可以通过this.$refs.<子组件ref名称>来获取子组件中声明的任何变量，还可以调用子组件中声明的函数。
但是这种方式比较粗暴，因为父组件可以通过这种方式获取到子组件中几乎所有的信息，当父组件对这些信息滥用时，会对程序产生一些不可控的问题
举例：

2.在props中双向绑定
这种方式，父组件给子组件的属性传参时，子组件中可以不用在props中声明，但是仍然可以使用相关属性的方式，比如一些公共的组件，或者中间组件。
举例：

可以在控制台中的日志里看到，父组件中传递的数值，全都可以在$attrs中找到，而声明的回调，可以在$listeners中找到，而且$listeners中还自动包含了.sync声明的属性的update事件。子组件几乎可以向使用普通props一样使用$attrs中的各种属性，当需要更新时使用this.$emit('update:')，回调时使用this.$emit('testChange')。

computed与watch的使用

watch和computed中声明方式:

watch:{
  watchAttr1: {
    handler: function (newVal,oldVal) {
      console.log(newVal)
    },
    deep:true,
    immediate: true,
  },
  watchAttr2(newVal,oldVal) {
    console.log(newVal)
  },
},
computed:{
  computedAttrs: {
    get() {
      return 'test'
    },
    set(val) {
      //对参与计算的属性，重新给这些属性赋值，内部双向绑定
    },
    cache: false, //是否缓存
  },
  computedAttrs2() {
    return 'test'
  },
},

参考链接
浅谈Vue中计算属性computed的实现原理
vue官方文档
Vue中的computed属性
vm.$attrs 【Vue 2.4.0新增inheritAttrs，attrs详解】
vue的props和$attrs