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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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也不会渲染。