>  기사  >  웹 프론트엔드  >  Vue.set 및 Vue의 this.$set에 대한 간략한 분석과 사용 시나리오를 살펴보세요!

Vue.set 및 Vue의 this.$set에 대한 간략한 분석과 사용 시나리오를 살펴보세요!

青灯夜游
青灯夜游앞으로
2022-03-04 16:41:123023검색

이 글은 Vue의 Vue.set과 this.$set에 대해 이야기하고, Vue.set과 this.$set의 사용 및 사용 시나리오를 소개합니다. 모두에게 도움이 되기를 바랍니다!

Vue.set 및 Vue의 this.$set에 대한 간략한 분석과 사용 시나리오를 살펴보세요!

1. Vue.set이 있는 이유

JavaScript 제한으로 인해 Vue는 데이터의 배열 및 객체의 변경 사항을 감지할 수 없으므로 뷰 업데이트를 트리거하지 않습니다. vuejs 비디오 튜토리얼

2. 솔루션

array

1. Vue

Vue.set 및 Vue의 this.$set에 대한 간략한 분석과 사용 시나리오를 살펴보세요!

에서 제공하는 변형 방법을 사용하세요. 이러한 방법을 통해 배열 업데이트를 감지할 수 있습니다.

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: &#39;#app&#39;,
    data: {
        items: [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;]
    },
    created() {
        this.items = [&#39;a&#39;, &#39;test&#39;, &#39;c&#39;]
    }
})
</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: &#39;#app&#39;,
    data: {
        object: {
            title: &#39;How to do lists in Vue&#39;,
            author: &#39;Jane Doe&#39;,
            publishedAt: &#39;2016-04-10&#39;
        }
    },
    created() {
        this.object = {
            title: &#39;How to do lists in Vue&#39;,
            author: &#39;Jane Doe&#39;,
            publishedAt: &#39;2016-04-10&#39;,
            test: &#39;newthing&#39;
        }
    }
})
</script>
</body>

에 키-값 쌍 {test: 'newthing'}을 추가합니다. 2. Vue.set을 사용합니다(아래 텍스트 참조). )


3. Vue.set

배열의 경우

Vue는 다음 배열 변경 사항을 감지할 수 없습니다.

  • 인덱스 값을 사용하여 vm과 같은 배열 항목을 직접 설정할 때. list[ 0]=newValue
  • vm.list[0]=newValue
  • 修改数组长度时,例如vm.list.length=newLength

举个栗子

var vm = new Vue({
  data: {
    items: [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;]
  }
})
vm.items[1] = &#39;x&#39; // 不是响应性的
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, &#39;b&#39;, 2)
이번에는 Vue.set 또는 this.$set

Usage

Vue.set(target,index,newValue)를 사용할 수 있습니다. >

this.$set(this.someObject,&#39;b&#39;,2)
const app = new Vue({
  data: {
    a: 1
  }
  // render: h => h(Suduko)
}).$mount(&#39;#app1&#39;)

Vue.set(app.data, &#39;b&#39;, 2)

객체의 경우Vue.set 및 Vue의 this.$set에 대한 간략한 분석과 사용 시나리오를 살펴보세요!

Vue는 속성 추가 또는 제거를 감지할 수 없습니다. Vue는 인스턴스를 초기화할 때 속성에 대해 getter/setter 변환을 수행하므로 Vue가 이를 반응형으로 변환하려면 해당 속성이 데이터 객체에 존재해야 합니다. 예를 들어

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;);

사용 방법

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 juejin.cn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제