Vue.set 및 Vue의 this.$set에 대한 간략한 분석과 사용 시나리오를 살펴보세요!
- 青灯夜游앞으로
- 2022-03-04 16:41:123002검색
이 글은 Vue의 Vue.set과 this.$set에 대해 이야기하고, Vue.set과 this.$set의 사용 및 사용 시나리오를 소개합니다. 모두에게 도움이 되기를 바랍니다!
1. Vue.set이 있는 이유
JavaScript 제한으로 인해 Vue는 데이터의 배열 및 객체의 변경 사항을 감지할 수 없으므로 뷰 업데이트를 트리거하지 않습니다. vuejs 비디오 튜토리얼
2. 솔루션
array
1. Vue
에서 제공하는 변형 방법을 사용하세요. 이러한 방법을 통해 배열 업데이트를 감지할 수 있습니다.
2. 전체 원본 배열 교체
다음 예에서는 vm.items[1] = 'excess'
<body>
<div id="app">
<ul>
<li v-for="(item, index) in items">
{{ index }} : {{ item }}
</li>
</ul>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
items: ['a', 'b', 'c']
},
created() {
this.items = ['a', 'test', 'c']
}
})
</script>
</body>3을 사용합니다(아래 참조).
Object
1. 원본 객체 전체를 교체합니다
다음 예에서는 객체
<body>
<div id="app">
<ul>
<li v-for="(value, name) in object">
{{ name }} : {{ value }}
</li>
</ul>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
},
created() {
this.object = {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10',
test: 'newthing'
}
}
})
</script>
</body>에 키-값 쌍 {test: 'newthing'}을 추가합니다. 2. Vue.set을 사용합니다(아래 텍스트 참조). )
3. Vue.set
배열의 경우
Vue는 다음 배열 변경 사항을 감지할 수 없습니다.
- 인덱스 값을 사용하여
vm과 같은 배열 항목을 직접 설정할 때. list[ 0]=newValue - 修改数组长度时，例如
vm.list.length=newLength
vm.list[0]=newValue举个栗子
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的这时可以使用Vue.set或者this.$set
使用方法
Vue.set(target,index,newValue)
// Vue.set Vue.set(vm.items, indexOfItem, newValue)
// this.$set vm.$set(vm.items, indexOfItem, newValue)
对于对象
Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。
举个栗子
var vm = new Vue({
data:{
a:1
}
})
// `vm.a` 是响应式的
vm.b = 2
// `vm.b` 是非响应式的使用方法
Vue.set(target,key,value)배열의 길이를 수정하는 경우, 예를 들어 vm.list.length=newLength
Vue.set(vm.someObject, 'b', 2)
이번에는 Vue.set 또는 this.$set
UsageVue.set(target,index,newValue)를 사용할 수 있습니다. >
this.$set(this.someObject,'b',2)
const app = new Vue({
data: {
a: 1
}
// render: h => h(Suduko)
}).$mount('#app1')
Vue.set(app.data, 'b', 2)
객체의 경우
Vue는 속성 추가 또는 제거를 감지할 수 없습니다. Vue는 인스턴스를 초기화할 때 속성에 대해 getter/setter 변환을 수행하므로 Vue가 이를 반응형으로 변환하려면 해당 속성이 데이터 객체에 존재해야 합니다. 예를 들어
var vm=new Vue({
el:'#test',
data:{
//data中已经存在info根属性
info:{
name:'小明';
}
}
});
//给info添加一个性别属性
Vue.set(vm.info,'sex','男');
사용 방법
Vue.set(target,key,value)
rrreeerrreee
주의 Vue는 루트 수준
반응형 속성🎜rrreee🎜🎜🎜🎜동적 추가를 허용하지 않습니다. Vue.set(object, propertyName, value) 메소드를 사용하여 🎜중첩된 객체🎜🎜rrreee🎜🎜🎜4에 반응형 속성을 추가할 수 있습니다. . 사용 시나리오 🎜🎜🎜데이터의 배열이나 개체를 수정하면 일부 작업이 응답하지 않습니다. 따라서 Vue는 데이터 업데이트를 감지할 수 없으므로 보기 업데이트가 트리거되지 않습니다. 이때 반응형 데이터 업데이트를 위해서는 Vue.set()을 사용해야 합니다. 🎜🎜(학습 영상 공유: 🎜vuejs 튜토리얼🎜, 🎜웹 프론트엔드🎜)🎜위 내용은 Vue.set 및 Vue의 this.$set에 대한 간략한 분석과 사용 시나리오를 살펴보세요!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!