vue里面set用法和参数（vue中methodswatchcomputed详解）
computed可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以下面是一个简易的计算器，来实现乘法的操作：，今天小编就来聊一聊关于vue里面set用法和参数?接下来我们就一起去研究一下吧!
vue里面set用法和参数
computed详解computed可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。下面是一个简易的计算器，来实现乘法的操作：
<p id="app"> {{ fullName }} </p>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: 'first',
lastName: 'last',
},
computed: {
fullName: function () {
return this.firstName ' ' this.lastName
}
}
})
</script>
需要注意的是，就算在data中没有直接声明出要计算的变量，也可以直接在computed中写入。
计算属性默认只有getter，可以在需要的时候自己设定setter：
computed: {
fullName: {
// getter
get: function () {
return this.firstName ' ' this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
computed擅长处理的场景：一个数据受多个数据影响
computed 和 methods相比，computed有缓存，性能开销小
watch详情watch和computed很相似，watch用于观察和监听页面上的vue实例，当然在大部分情况下我们都会使用computed，但如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择。watch为一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象：
例：父组件应用子组件时需要传入一个参数menuList
<el-aside width="auto">
//左侧菜单组件 menuList为传入的菜单列表
<LeftMenu :menuList="menuList"/>
</el-aside>
如果父组件中的数据menuList一旦有变化，子组件中必须要监听父组件的数据并实时更新
watch:{
menuList:{
updateData(newValue,oldValue){
this.menuList = newValue;
}，
immediate:true //页面加载就监听
}
}
如果在data中没有相应的属性的话，是不能watch的，这点和computed不一样。
watch擅长处理的场景：一个数据影响多个数据
methods详情methods方法，跟前面的都不一样，我们通常在这里面写入方法，只要调用就会重新执行一次，相应的有一些触发条件，在某些时候methods和computed看不出来具体的差别，但是一旦在运算量比较复杂的页面中，就会体现出不一样。
在computed和watch方面，一个是计算，一个是观察，在语义上是有区别的
,免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
