组件通信+依赖注入、watch和computed区别

一、组件基础铺垫

1、vue框架中提倡组件化开发，组件是一个独立的模块，数据、方法不能直接相互使用；

2、组件是多例的，组件是一个构造函数的实例化对象，单例情况下都引用同一个实例，会造成数据污染，所以组件是多例的，数据不共用（组件实例化，是在视图渲染时创建的）

 <my-lable></my-lable>
   const MyLable = {
       template:`<div>内容</div>`
   }
app.component('my-lable', MyLable)

二、组件通信 

        1、父子组件传值 

(1)父传子 props

//子组件内定义props属性来接收父组件的数据
       props:{			       
           parentTitle:{
               required: true   //要求必传
           }
       } 

//父组件内的子组件标签上动态绑定props内的属性
  <child-title :parent-title="传值"><child-title/>  //不写:会被认为传的是字符串

(2) 子传父  $emit

// 在子组件内触发自定义事件
      <button @click="addEvt"><button/>
      methods:{
          addEvt(){
              this.$emit('myClick', 2)
          }
      }


// 在父组件内的子组件标签上自定义事件，绑定修改数据的回调方法（子组件触发父组件事件去修改）
      <child-title @myClick="changeCount"><child-title/>
      methods:{
          changeCount(step){
              this.count += step
          }
      }

        2、实例传值

（1）this.$parent.list    //直接获取父组件实例，就可修改实例任意东西
   (2) this.$children    //获取子组件实例，只有Vue2可用    
   (3) this.$refs        //组件标签上绑定ref属性，可获取组件实例

 三、provide提供 + inject注入 (跨组件通信)

 (1)对象写法：只能传递固定数据，不能使用this：
    provide:{}    

(2)函数形式：可用this，if需要修改数据，则需用computed函数来实时监听

 provide(){        //提供
        return {
            title: this.title,
            count: vue.computed( () => this.mycount )	//自动return
        }
    }
inject:['title']    //注入

四、watch观察属性

 作用：用于在完成页面和数据交互之前，对新数据进行判断和预处理；监听属性值的修改

watch:{
        list: function(newValue, oldValue){
            this.manCount = newValue.filter(it => it.sex === '男' ).length
            this.beautyCount = newValue.filter(it => it.sex === '女' ).length
        }  //浅监听
        list:{
            deep: true,		//深度监听
            handler: function(newValue, oldValue){
                this.manCount = newValue.filter(it => it.sex === '男' ).length
                this.beautyCount = newValue.filter(it => it.sex === '女' ).length
        	}
        }
    }

五、computed计算属性

 computed内有getter方法，定义时为方法，使用时为值

        依赖于data中的属性，data发生了变化，就会触发调用一次computed

class Test {
    get value(){
        return 1000		//getter定义时为值，使用时为值
    }
}
var a = new Test()
a.value //输出结果为1000

computed:{
    beautyCount(){
        return this.list.filter(it => it.sex === '女').length
    }
}

 computed计算属性和watch属性之间的区别 

        watch 通过监听 data 中的某个属性的变化来触发回调函数，而 computed 则依赖于 data 中的一些属性计算出一个新的值，它会自动进缓存，在依赖的值发生变化时会进行重新计算。
总结来说:
        watch 主要用于监听特定属性的变化，以触发对应的回调函数，适用于处理一些异步或与后端交互的操作。

        computed 主要用于根据data 中的属性计算出一个新的值，它会自动缓存和监听依赖的属性，适用于在模板中展示计算后的结果