关于【vue.set()用法】，vue里面set用法和参数，今天犇涌小编给您分享一下，如果对您有所帮助别忘了关注本站哦。
内容导航：1、vue.set()用法：1天让你精通vue(4)2、vue.set()用法，vue里面set用法和参数1、vue.set()用法：1天让你精通vue(4)
一、条件渲染
（一）v-if
写法：
(1) v-if="表达式"
(2) v-else-if="表达式"
(3) v-else="表达式"
适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。
注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。
（二）v-show
写法：v-show="表达式"
适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
（三）备注：
使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
二、列表渲染
（一）v-for指令
(1) 用于展示列表数据
(2) 语法：v-for="(item, index) in xxx" :key="yyy"
(3) 可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
（二）key有什么作用？（key的内部原理）
(1) 虚拟DOM中key的作用：
① key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
(2) 对比规则：
① 旧虚拟DOM中找到了与新虚拟DOM相同的key：
1) 若虚拟DOM中内容没变, 直接使用之前的真实DOM！
2) 若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
② 旧虚拟DOM中未找到与新虚拟DOM相同的key
1) 创建新的真实DOM，随后渲染到到页面。
(3) 用index作为key可能会引发的问题：
① 若对数据进行：逆序添加、逆序删除等破坏顺序操作:会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
② 如果结构中还包含输入类的DOM：
1) 会产生错误DOM更新 ==> 界面有问题。
(4) 开发中如何选择key?:
① 最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
② 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。
（三）Vue Set的使用
(1) 对象中后追加的属性，Vue默认不做响应式处理
(2) .如需给后添加的属性做响应式，请使用如下API：
① Vue.set(target，propertyName/index，value)
或
② vm.$set(target，propertyName/index，value)
(3) 在Vue修改数组中的某个元素一定要用如下方法：
① 使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
② Vue.set() 或 vm.$set()
(4) 特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！
<div id="app"> <span>用户名：{{student.name}}</span> <br><br> <span>性别：{{student.sex}}</span> <br><br> <span>年龄：{{student.age}}</span> <br><br> <button @click="addAge">添加一个属性</button></div><script> Vue.config.productionTip = false new Vue({ el:'#app', data:{ student:{ name:'lisi', sex:'男' } }, methods: { addAge(){ // Vue.set(this.student,'age',40) this.$set(this.student,'age',30) } }, })</script>
三、过滤器
(1) 定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
(2) 语法：
① 注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
② 使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
(3) 备注：
① 过滤器也可以接收额外参数、多个过滤器也可以串联
② 并没有改变原本的数据, 是产生新的对应的数据
2、vue.set()用法，vue里面set用法和参数
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方面，一个是计算，一个是观察，在语义上是有区别的
本文关键词：vue.$set，vue中的set，vue setstate，vue的$set用法，vue. set。这就是关于《vue.set()用法，vue里面set用法和参数（1天让你精通vue）》的所有内容，希望对您能有所帮助！