基本用法,最直接，最基本的用法

• 下面是watch的一种基本用法

<input type="text" v-model="cityName"/>

new Vue({
 el:"#root",
 data:{
 cityName:'shanghai'
 },
 watch:{
   cityName(newName,oldName) {
   
   //.....
   
   }
 }
})

• 直接写一个监听处理函数，当每次监听到cityName值发生改变时，执行函数。也可以在监听的数据后面直接加字符串形式的方法名：

watch: {
    cityName: 'nameChange'
    }
 } 

最长用的是immediate和handler

• 这两个功能经常会用到但是不明白原因，接下来就详细的了解一下吧，哈哈哈

watch的原本特点

• 使用watch基本用法时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。
• 如果我们需要在最初绑定值的时候也执行函数，则需要用到immediate属性。
• 总结：
  • watch不会直接执行，当值改变才会执行；
  • 用immediate属性,一开始就会执行；

案例

• 父组件向子组件自动传值时，子组件props首次获取父组件传来的默认值，也需要执行函数，需要将immediate设为true;
• 监听的数据后面写成对象形式，包含handler方法和immediate,之前我们写的函数就是在写这个handler方法。
• immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。

3. deep

当需要监听一个对象的改变时，基本的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。

watch: {
    'cityName.name': {
      handler(newName, oldName) {
      // ...
      },
      deep: true,
      immediate: true
    }
  }

这样只会给对象的某个特定的属性加监听器。数组（一维、多维）的变化不需要通过深度监听，对象数组中对象的属性变化则需要deep深度监听。

props的用法

子组件中

• 工作中常用这种写法；

props: {
		lineData: {
			type: Object,
			require: true,
		},
	},

• 这是在子组件中接收的lineData;

父组件中

• 首先肯定引用这个子组件，在这里面给她传值；

<div class="line-chart">
   <LineChart :lineData="lineData" />
</div>

• 父组件里的lineData，就是正常获取值；

data(){
  lineData: {
	  xData: [],
	  legend: [],
	  lineSeries: [],
	  },
}

• 在methods里面获取值

this.lineData = { xData, legend, lineSeries }

总结

• 父组件里面的lineData,已经有了值；
  • 传给子组件，用props接收lineData,
  • 在子组件，用watch来监视lineData,
  • 把从父组件接收的值传给子组件

  	watch: {
    	lineData: {
    		handler(val) {
    			this.options.legend.data = val.legend
    			this.options.xAxis.data = val.xData
    			this.options.series = val.lineSeries
  
                console.log(JSON.parse(JSON.stringify(this.options)))
    			this.$forceUpdate()
    		},
    	},
    },
  
  

props的接收类型

1. • 功能：让组件接收外部传过来的数据；
2. • 传递数据：<Demo name="xxx"/>
     • 实例传递 <LineChart :lineData="lineData" />
3. • 接收数据：
     • 第一种方式（只接收）：props:['name']
     • 第二种方式（限制类型）：props:{name:string}
     • 第三种方式（限制类型、限制必要性、指定默认值）：

     props:{
      name:{ 
         type:String, //类型 
         required:true, //必要性 
         default:'老王' //默认值 } }
     

     • 实例接收：接收的类型是个对象，有必要；

     props: {
       lineData: {
       	type: Object,
       	require: true,
       },
               }，