vue中的数据处理

父组件向子组件传值

• prop

比如说，父组件中data有个fatherwaterList对象需要传到子组件riskDrawer里：
父组件要写的：

< riskDrawer  :childwaterList="fatherwaterList" />

子组件要写的：

props：{
	childwaterList：Object
}

父组件里咋用的fatherwaterList子组件里就咋用childwaterList

• ref

 <riskDrawer  ref="riskDrawerDom"  :waterList="waterList" />

在method里面：

methods: {
    openRiskDrawer(data) {
        this.$nextTick(()=>{
            this.$refs.riskDrawerDom.handleShow(data)
        })
    },

调用openRiskDrawer这个方法的时候，可以通过操作this.$ref来操作riskDrawer，使它调用handleshow（），感觉跟id差不多

computed

computed跟data差不多，都是存的数据

computed ：{
 titleObject :function(){
            switch(this.displayTable){
                case 0 :
                    return {
                        title:"标题1",
                        total:this.waterList.riskNum,
                    }
                case 1 :
                    return {
                        title:"标题2",
                        total:this.waterList.riskClearRate,
                    }
                case 2 :
                    return {
                        title:"标题3",
                        total:this.waterList.riskConverEventRate,
                    }
            }
        },

调用方式跟data一样，都是titleObject.title,titleObject.total这样，这算是set
get：
首先在data里面定义titleObject,
然后在computed里面写
titleobject :{
set(newvalue){
this.myvalue = newvalue
return this.myvalue
}
}
差不多吧，反正用到get再搜

computed和method的区别

值改变的时候，computed自动更新，method不会，得自己调用

watch

当msg的值变化的时候，watch会监听到而且执行

const vm = new Vue({
  el:'#app',
  data:{
    msg:""
  },
  watch:{
    //被偵聽的資料名稱(新值,舊值){}
    msg(newMsg,oldMsg){
      console.log('从'newMsg'变成'oldMsg)
    }
  }
})

watch还有一些很牛牛的实例方法
比如说：deep
可以用来侦听对象里的属性变化，如果不用deep，在默认情况下只能监听到对对象重新赋值这种，比如说this.msg={}
如果想要监听obj对象中的msg属性的值改变，就要用到deep属性，deep：true

const vm = new Vue({
  el:'#app',
  data:{
    obj:{
    	msg:''
	}
  },
  watch:{
	obj: {
    handler(newName, oldName) {
      console.log('obj.a changed');
    },
    immediate: true,
    deep: true
  }
  }
})

这里面的handler方法是默认绑的，没懂
再比如说 immediate
默认情况下，watch的handler函数只有在监听的属性改变时才会被执行，但如果我们想让watch一被声明就执行handler的话（我感觉像dowhile跟while的区别），就要用到immediate属性。immediate: true

JSON.parse() 和 JSON.stringify()

parse()：用于将一个字符串解析成一个json对象，例如

var str = '{"name":"jack","age":"18"}';
JSON.parse(str);

结果是：

Object {
	name:"jack",
	age:"18"
}

stringify()：从一个对象中解析出字符串，例如

var obj = {
	a:1,
	b:2
};
JSON.stringify(obj);

结果是：

"{"a":1,"b":2}"

那么JSON.parse(JSON.stringify(obj))是干啥用的呢，深拷贝