有哪三种写法啊?话不多说,先上代码:
<!--第一种 -->
<script>
let app = new Vue({
el:'#app',
data:{
checked: false
}
})
</script>
<!--第二种 -->
<script>
let app = new Vue({
el:'#app',
data: function() {
return {
checked: false
}
}
})
</script>
<!--第三种 -->
<script>
let app = new Vue({
el:'#app',
data() {
return {
checked: false
}
}
})
</script>
这三种写法的区别是啥啊?
其实,第三种是第二种的 ES6 写法,在简单的 Vue 实例中,这几种写法没什么区别,因为 app 对象不会被复用。
但是,在组件中,data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例,通过提供 data 函数,每次创建一个新实例后,能够调用 data 函数从而返回初始数据的一个全新副本。但是,如果 data 是一个纯粹的对象,则所有的实例将会共享同一个data数据对象,造成数据污染。
OK,大伙明没明白?明白了吧!