As mentioned in the in- depth response principle in the official vue documentation, there are some precautions for detecting changes .
Due to JavaScript limitations, Vue cannot detect changes in arrays and objects. Nevertheless, we still have some ways to circumvent these restrictions and ensure their responsiveness.
What does this sentence mean?
Let's look at a small example first.
<div id="app">
<h3>{
{
user.name}},{
{
user.age}}</h3>
<button @click='handlerAdd'>添加属性</button>
</div>
<script>
new Vue({
el:'#app',
data:{
user:{
}
},
created () {
this.user.name = 'Ray'
},
methods: {
handlerAdd(){
console.log('触发点击事件');
this.user.age = 20; }
}
});
</script>
First, we write the data in an empty user objects , the Created hook function , we have the addition of a user object attribute name , assigned to Ray .
Then we wrote a button. The focus is on the operation of this button. We want to continue to add an age attribute to this button with a value of 20 .
According to normal logic, this should be no problem.
Let's take a look at the rendering of the page.
A statement was output on the console, indicating that we triggered the click event , but the value of age was not rendered on the page .
What's wrong, this is the precautions that the official vue prompts.
Due to JavaScript limitations, Vue cannot detect changes in arrays and objects. Nevertheless, we still have some ways to circumvent these restrictions and ensure their responsiveness.
Let's take a look at how to solve this problem? Vue
provides an API, Vue.$set(object,key,value) , to avoid this problem.
<div id="app">
<h3>{
{
user.name}},{
{
user.age}}</h3>
<button @click='handlerAdd'>添加属性</button>
</div>
<script>
new Vue({
el:'#app',
data:{
user:{
}
},
created () {
this.user.name = 'Ray'
},
methods: {
handlerAdd(){
console.log('触发点击事件');
this.$set(this.user,'age',20); }
}
});
</script>
After we use this API provided by vue, we will look at the rendering results of the page.
Sure enough, the content of the age attribute can be displayed normally.
But the above API, Vue.$set(object,key,value) , can only add one attribute at a time . What if we want to add multiple sets of attributes?
Vue also provided us with countermeasures.
<div id="app">
<h3>{
{
user.name}},{
{
user.age}}</h3>
<button @click='handlerAdd'>添加属性</button>
</div>
<script>
new Vue({
el:'#app',
data:{
user:{
}
},
created () {
this.user.name = 'Ray'
},
methods: {
handlerAdd(){
console.log('触发点击事件');
this.user = Object.assign({
},this.user,{
age:20,
phone:18331092918
})
}
}
});
</script>
Object.assign({}, this.someObject, { key1: value1, key2: value2 })
Let's take a look at the display effect of the page:
Sure enough, it was very nice.
Today this knowledge point is still more important, whether it is interviews or our daily development, we may step on this pit.
There is a WeChat mini program course design, complete design needs, contact personal QQ: 505417246
Pay attention to the following WeChat public account, you can receive WeChat applet, Vue, TypeScript, front-end, uni-app, full stack, Nodejs, Python and other practical learning materials. The
latest and most complete front-end knowledge summary and project source code will be released to the WeChat public as soon as possible No., please pay attention, thank you!
