vue 数据操作相关总结

vue中有很多有关数据的操作方法，比如父子组件数据的传递，子组件修改父组件数据，props,computed,watch,sync等，今天就来总结一下这些操作方法的使用

computed是计算属性：减少模板{{}}的复杂度。 在模板中放入太多的逻辑会让模板过重且难以维护。对于任何复杂逻辑，你都应当使用计算属性 把复杂的运算逻辑写到computed的函数里面，再在模板里引用就使逻辑变得简单明了了 使用方法： computed与data并列，将一系列操作封装成一个方法，放到computed里，调用时直接写方法名，不用加( )

new Vue({
 el:"#app",
 data:{
  user:{
   email:"dong@qq.com",
   nickname:"oldUath",
   phone:"12812345678"
  }
 },
 //计算属性
 computed:{
  displayName(){
    //返回一个结果
   const user=this.user
   return user.nickname ||user.phone||user.email
  }
 },
 template:`
   
   {{displayName}}
   
 `
})

watch：侦听器：观察Vue实例上的数据变动,只要指定的数据改变就会执行预定的函数 当需要在数据变化时执行异步或开销较大的操作时;

    {{msg}} 
    
 
    改变了吗? {{isChange}}
    改变
  
  new Vue({
   el: "#app",
   data: {
   		//这是第一层数据
      msg:'欲穷千里目',
     	isChange:'No',
      user:{
      	//这是第二层数据
 name:"oldUath",
 phone:'18312345678'
      }
   },
   watch:{
    //只要msg改变,这个方法就会执行,第一层数据只需要写 数据名(){}就可以
    msg(val,oldVal){
      this.isChange = 'Yes'
    },
    //第二层数据需要'','user.name'(){}
    'user.name'(){
    	console.log('user.name变了')
    }
   },
   methods:{
    change(){
      this.msg = '更上一层楼'
    }
   }
  })

注意：在vue里面如果把一个对象原封不动的再赋值给他，那么他的地址就变了

//obj:{a:'a'}
obj.a+='hi'//才是监听obj时，因为obj地址没有发生变化，所以不会执行监听obj的事件

可以使用 deep：true这个是代表让watch往深处监听，值变了就相当于改变了

watch:{
	obj(){
  		handle(){console.log('obj变了')
  	},
  	 deep: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})

父组件要想给子组件传入数据，需要在子组件种使用Props引入变量

父组件要给子组件出入 money="100"
先在父组件种传入

//在父组件调用子组件

再在子组件种引入数据,引入money这个变量

此时子组件只能使用父组件的数据，而不能修改

组件不能直接修改props外部的数据

在子组件使用 $emit(‘参数1'，参数2)

当前实例继承了eventBus，可以触发一个事件

在子组件写$emit,第一个参数是事件名，第二个参数是修改后的值

花钱

在父组件使用 $event接受参数2；

$event就是接收子组件参数2返回的结果的

父组件这一大段代码太麻烦了，vue把它封装成了一个修饰符

子组件还是那样写

这个只解决了父子组件的通信问题，兄弟组件的通信问题呢？

这种方法通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。当我们的项目比较大时，可以选择更好的状态管理解决方案vuex。 具体实现方式

  var Event=new Vue();
  Event.$emit(事件名,数据);//传递事件数据
  Event.$on(事件名,data => {});//接受数据

举个例子：A组件向C组件传递信息，ABC是相邻组件

首先在A组件提供事件数据使用$emit,第一个参数是数据名，要与接收数据的on的第一个参数相同；第二个参数是数据

在C组件接受数据 $on，第一个参数是数据名，第二个参数用来接收数据

• 父子之间传递数据用 props和$emit
• 兄弟之间传递数据用 $emit和$on
• 父组件向孙子组件传递数据使用 provide和inject

以上就是vue 数据操作相关总结的详细内容，更多关于vue 数据操作的资料请关注考高分网其它相关文章！