计算属性computed

<div id="app">
	<h1>{{msg}}</h1>
	<h2>{{sum}}</h2>
</div>
<script src="../js/vue.js"></script>

<script>
const vm = new Vue({
	el: '#app',
	data: {
            msg: '',
            a: 10,
            b: 20,
	},
	computed: {
		sum(){
                    return this.a + this.b
                    },
		  },
   //下面是计算属性的另外一种写法 get就是和上面sum 功能一样 set是当直接改变 sum 时候才会执行
      computed:{
         sum:{
             get(){
              return this.a + this.b
                    },
              set(value){
               console.log('>>> ',value);
                    }
                }
            }
})
</script>

侦听属性watch

<-！//1. watch基本使用
//2. watch与computed对比
    // - watch侦听一个响应式属性
    // - computed：根据多个响应式数据的变化计算值
 //3. 侦听对象 
      //深度侦听 deep
//4. 侦听对象单个属性
//5. 立即侦听  immediate:true->

<div id="app">
    <h2>侦听属性watch</h2>
    <!-- {{message}} -->
</div>
<script src="../js/vue.js"></script>

<script>
const vm = new Vue({
  el:'#app',
  data:{
    username:'jack',
    book:{
          ame:'vue编程',
          price:89,
          num:1
    }
  },
  watch:{
     //侦听username数据
     //newvalue侦听到的数据的值，oldvalue是原来值
     // username(newvalue,oldvalue){
         // console.log('newvalue :',newvalue,  ' oldvalue :',oldvalue);
     // }
    username:{
        handler(newvalue,oldvalue){
            console.log('newvalue :',newvalue, 'oldvalue :',oldvalue);
        },
        immediate:true //立即侦听响应式数据变化
    },
    book:{
       handler(value){
          console.log('>>>> ',value.name);
       },
    //深度侦听 如果watch侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用deep选项。
       deep:true 
    },
                    
    //侦听对象单个属性也可以
      'book.num':{  
          handler(value){
              console.log('>>>> ',value);
          }
       }   
  },
})
</script>

组件之间的通讯

父传子

//1. 父组件->子组件：props
	/*
	1. 在父组件使用子组件时自定义属性,绑定传的值
		<button-counter :name="username"></button-counter>
	2. 在子组件中定义props选项，值对应数组，数组元素为接收的自定义属性名
		props:['name']
		
1.示例代码如下在父组件中：
<div>
    <h1>我是父亲组件页面</h1>
    <h1>{{name}}</h1>
    <router-view :book="book" :state="state"></router-view>
</div>
<script>
export default {
    data(){
        return {
          name:'',
          state:"我是父元素的内容我要去子元素中",
          book:{
            name:"西游记",
            price:55.6,
            id:1001
          }
       }
    },
}
</script>

2.在子组件中如下：
<template>
  <div>
    <h2>子组件页面</h2>
    <h1>{{content}}</h1>
    <h6>{{state}}</h6>
  </div>
</template>
<script>

export default {
    props:["book","state"],
    data() {
      return {
        name:"",
        content:""
      }
    },
}
</script>