이 글은 Vue의 Vue.set과 this.$set에 대해 이야기하고, Vue.set과 this.$set의 사용 및 사용 시나리오를 소개합니다. 모두에게 도움이 되기를 바랍니다!
JavaScript 제한으로 인해 Vue는 데이터의 배열 및 객체의 변경 사항을 감지할 수 없으므로 뷰 업데이트를 트리거하지 않습니다. vuejs 비디오 튜토리얼
에서 제공하는 변형 방법을 사용하세요. 이러한 방법을 통해 배열 업데이트를 감지할 수 있습니다.
다음 예에서는 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>다음 예에서는 객체
<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>Vue는 다음 배열 변경 사항을 감지할 수 없습니다.
vm과 같은 배열 항목을 직접 설정할 때. list[ 0]=newValuevm.list[0]=newValuevm.list.length=newLength举个栗子
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(target,index,newValue)</code를 사용할 수 있습니다. ></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">this.$set(this.someObject,&#39;b&#39;,2)</pre><div class="contentsignin">로그인 후 복사</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">const app = new Vue({
data: {
a: 1
}
// render: h => h(Suduko)
}).$mount(&#39;#app1&#39;)
Vue.set(app.data, &#39;b&#39;, 2)</pre><div class="contentsignin">로그인 후 복사</div></div><h3 data-id="heading-12"><p>객체의 경우<img src="https://img.php.cn/upload/image/851/547/687/164638308062437Vue.set 및 Vue의 this.$set에 대한 간략한 분석과 사용 시나리오를 살펴보세요!" title="164638308062437Vue.set 및 Vue의 this.$set에 대한 간략한 분석과 사용 시나리오를 살펴보세요!" alt="Vue.set 및 Vue의 this.$set에 대한 간략한 분석과 사용 시나리오를 살펴보세요!"/></p><p>Vue는 속성 추가 또는 제거를 감지할 수 없습니다. Vue는 인스턴스를 초기화할 때 속성에 대해 getter/setter 변환을 수행하므로 Vue가 이를 반응형으로 변환하려면 해당 속성이 데이터 객체에 존재해야 합니다. <strong></strong>예를 들어</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">var vm=new Vue({
el:&#39;#test&#39;,
data:{
//data中已经存在info根属性
info:{
name:&#39;小明&#39;;
}
}
});
//给info添加一个性别属性
Vue.set(vm.info,&#39;sex&#39;,&#39;男&#39;);</pre><div class="contentsignin">로그인 후 복사</div></div><h4 data-id="heading-13">
<h2 data-id="heading-15">사용 방법<strong></strong>
</h2>
<code>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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
