快捷導(dǎo)航

vue 數(shù)據(jù)操作相關(guān)總結(jié)

更新時(shí)間：2020年12月17日 09:13:12 作者：oldUath

這篇文章主要介紹了vue 數(shù)據(jù)操作的相關(guān)資料，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下

vue中有很多有關(guān)數(shù)據(jù)的操作方法，比如父子組件數(shù)據(jù)的傳遞，子組件修改父組件數(shù)據(jù)，props,computed,watch,sync等，今天就來(lái)總結(jié)一下這些操作方法的使用

computed是計(jì)算屬性

computed是計(jì)算屬性：減少模板{{}}的復(fù)雜度。在模板中放入太多的邏輯會(huì)讓模板過(guò)重且難以維護(hù)。對(duì)于任何復(fù)雜邏輯，你都應(yīng)當(dāng)使用計(jì)算屬性把復(fù)雜的運(yùn)算邏輯寫(xiě)到computed的函數(shù)里面，再在模板里引用就使邏輯變得簡(jiǎn)單明了了使用方法： computed與data并列，將一系列操作封裝成一個(gè)方法，放到computed里，調(diào)用時(shí)直接寫(xiě)方法名，不用加( )

new Vue({
 el:"#app",
 data:{
  user:{
   email:"dong@qq.com",
   nickname:"oldUath",
   phone:"12812345678"
  }
 },
 //計(jì)算屬性
 computed:{
  displayName(){
    //返回一個(gè)結(jié)果
   const user=this.user
   return user.nickname ||user.phone||user.email
  }
 },
 template:`
   <div>
   {{displayName}}
   </div>
 `
})

watch偵聽(tīng)器

watch：偵聽(tīng)器：觀察Vue實(shí)例上的數(shù)據(jù)變動(dòng),只要指定的數(shù)據(jù)改變就會(huì)執(zhí)行預(yù)定的函數(shù) 當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開(kāi)銷(xiāo)較大的操作時(shí);

watch使用方法一：

<div id="app">
    {{msg}} 
    <br> 
    改變了嗎? {{isChange}}
    <button @click="change">改變</button>
  </div>
  new Vue({
   el: "#app",
   data: {
   		//這是第一層數(shù)據(jù)
      msg:'欲窮千里目',
     	isChange:'No',
      user:{
      	//這是第二層數(shù)據(jù)
        name:"oldUath",
        phone:'18312345678'
      }
   },
   watch:{
    //只要msg改變,這個(gè)方法就會(huì)執(zhí)行,第一層數(shù)據(jù)只需要寫(xiě) 數(shù)據(jù)名(){}就可以
    msg(val,oldVal){
      this.isChange = 'Yes'
    },
    //第二層數(shù)據(jù)需要'','user.name'(){}
    'user.name'(){
    	console.log('user.name變了')
    }
   },
   methods:{
    change(){
      this.msg = '更上一層樓'
    }
   }
  })

注意：在vue里面如果把一個(gè)對(duì)象原封不動(dòng)的再賦值給他，那么他的地址就變了

//obj:{a:'a'}
obj.a+='hi'//才是監(jiān)聽(tīng)obj時(shí)，因?yàn)閛bj地址沒(méi)有發(fā)生變化，所以不會(huì)執(zhí)行監(jiān)聽(tīng)obj的事件

可以使用 deep：true這個(gè)是代表讓watch往深處監(jiān)聽(tīng)，值變了就相當(dāng)于改變了

watch:{
	obj(){
  		handle(){console.log('obj變了')
  	},
  	 deep:true
}

使用方法二： vm.$watch('監(jiān)聽(tīng)的變量',調(diào)用的函數(shù),{immediate:true})

與方法一的效果相同

const vm = new Vue({
   el: "#app",
   data: {
      msg:'欲窮千里目',
     	isChange:'No',
      user:{
        name:"oldUath",
        phone:'18312345678'
      }
   },
   methods:{
    change(){
      this.msg = '更上一層樓'
    }
   }
  })
  vm.$watch('msg',function(){
  		console.log('n變了')
  },{immediate:true})

父組件給子組件傳遞數(shù)據(jù)： Props

父組件要想給子組件傳入數(shù)據(jù)，需要在子組件種使用Props引入變量

父組件要給子組件出入 money="100"
先在父組件種傳入

//在父組件調(diào)用子組件
<Child :money="100"><Child>

再在子組件種引入數(shù)據(jù),引入money這個(gè)變量

<template>
<div class="red">
+  {{money}}元
 <button>花錢(qián)</button>
</div>
</template>
<script>
export default {
+ props:['money']
}
</script>

此時(shí)子組件只能使用父組件的數(shù)據(jù)，而不能修改

子組件修改父組件的數(shù)據(jù)（.sync原理）

組件不能直接修改props外部的數(shù)據(jù)

使用$emit進(jìn)行修改

在子組件使用 $emit(‘參數(shù)1'，參數(shù)2)

當(dāng)前實(shí)例繼承了eventBus，可以觸發(fā)一個(gè)事件

在子組件寫(xiě)$emit,第一個(gè)參數(shù)是事件名，第二個(gè)參數(shù)是修改后的值

<!-- $emit()觸發(fā)一個(gè)事件，update:money是事件名  -->
<button @click="$emit('update:money',money-10)">花錢(qián)</button>

在父組件使用 $event接受參數(shù)2；

$event就是接收子組件參數(shù)2返回的結(jié)果的

<!--  傳給子組件一個(gè)money值,v-on是監(jiān)聽(tīng)子組件的update:money事件，
      $event獲取子組件事件的結(jié)果-->
  <Child :money="total" v-on:update:money="total = $event" />

簡(jiǎn)化結(jié)果： sync

父組件這一大段代碼太麻煩了，vue把它封裝成了一個(gè)修飾符

  <Child :money.sync="total" />

子組件還是那樣寫(xiě)

這個(gè)只解決了父子組件的通信問(wèn)題，兄弟組件的通信問(wèn)題呢？

兄弟組件通信：emit/emit/on

這種方法通過(guò)一個(gè)空的Vue實(shí)例作為中央事件總線（事件中心），用它來(lái)觸發(fā)事件和監(jiān)聽(tīng)事件,巧妙而輕量地實(shí)現(xiàn)了任何組件間的通信，包括父子、兄弟、跨級(jí)。當(dāng)我們的項(xiàng)目比較大時(shí)，可以選擇更好的狀態(tài)管理解決方案vuex。具體實(shí)現(xiàn)方式

  var Event=new Vue();
  Event.$emit(事件名,數(shù)據(jù));//傳遞事件數(shù)據(jù)
  Event.$on(事件名,data => {});//接受數(shù)據(jù)

舉個(gè)例子：A組件向C組件傳遞信息，ABC是相鄰組件

首先在A組件提供事件數(shù)據(jù)使用$emit,第一個(gè)參數(shù)是數(shù)據(jù)名，要與接收數(shù)據(jù)的on的第一個(gè)參數(shù)相同；第二個(gè)參數(shù)是數(shù)據(jù)

<template id="a">
 <div>
  <h3>A組件：{{name}}</h3>
  <button @click="send">將數(shù)據(jù)發(fā)送給C組件</button>
 </div>
</template>

<script>
var Event = new Vue();//定義一個(gè)空的Vue實(shí)例
var A = {
  template: '#a',
  data() {
   return {
    name: 'tom'
   }
  },
  methods: {
   send() {
    Event.$emit('data-a', this.name);
   }
  }
}
</script>

在C組件接受數(shù)據(jù) $on，第一個(gè)參數(shù)是數(shù)據(jù)名，第二個(gè)參數(shù)用來(lái)接收數(shù)據(jù)

<template id="c">
 <div>
  <h3>C組件：{{name}}，{{age}}</h3>
 </div>
</template>
<script>

var Event = new Vue();//定義一個(gè)空的Vue實(shí)例
var C = {
  template: '#c',
  data() {
   return {
    name: '',
    age: ""
   }
  },
  mounted() {//在模板編譯完成后執(zhí)行
   Event.$on('data-a',name => {
     this.name = name;//箭頭函數(shù)內(nèi)部不會(huì)產(chǎn)生新的this，這邊如果不用=>,this指代Event
   })
  }
}
</script>