每日一题-写出页面渲染值

发表于 更新于 阅读次数： 本文字数： 573 阅读时长 ≈ 1 分钟 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
<div>{{a.b}}</div>
</template>
<script>
export default {
    data(){
     return {
        a:{}
    }
},
    created(){
    this.a.b= 1
    },
    mounted(){
        this.a.b=2
    }
}
</script>

分析

  • vue会在初始化实例时对property执行setter/getter转化，所以property必须在data对象上才能转化为响应式的。so，a.b是非响应式的，视图不会刷新
  • Vue组件生命周期，created早于mouted，所以视图显示会是1
  • 这道题涵盖两个知识点，Vue的响应式原理+created与mounted生命周期区别

例子测试链接戳这里

总结

虽然这道题是vue相关，但延伸到react,angular框架也都会有类似的问题，多少会有差异而已。比如react判断state数据change的标准是内存地址，假如我们并不使用setState，实际上view也不会渲染。