声明式渲染与 data 函数

代码语言：javascript复制

目录

声明式渲染
data 必须是一个函数
为什么 data 必须是一个函数？
提一个 data 作为箭头函数的写法
源码

声明式渲染

这是学习vue开发，必先了解的第一个特征。如前已经实现的App.vue组件，已经包括声明式渲染：

代码语言：javascript复制

<template>
  <div>{{message}}</div>
</template>

<script>
export default {
  name: 'App',
  components: {},
  data: () => ({
    message:'hi'
  }),
};
</script>

message是在data中声明的一个文本，直接以{{message}}内嵌于模板中。当message改变时，模板会自动更新。

这是由于vue2基于Object.defineProperty()给data中的每个属性定义了一对setter/getter。当模板渲染时，getter被调用，视图依赖的数据项被记录下来；当数据改变时，检查改变的数据有没有被依赖，如果有，重新渲染视图。

这就是MVVM框架在view与data-view之间实现的BI-DataBinding机制。

data 必须是一个函数

如果直接返回一个对象，在vue-cli3中，编译阶段直接就报错了。

vue组件的导出是唯一的，如果返回的是一个对象，那么所有该组件的实例将共享同一块内存的数据对象，改变任何一个组件实例的数据，其它均会受到影响。

例如，将App.vue修改为：

代码语言：javascript复制

<template>
  <div>
    <HellWorld></HellWorld>
    <HellWorld></HellWorld>
    <HellWorld></HellWorld>
  </div>
</template>

<script>
import HellWorld from './HelloWorld.vue'
export default {
  name: 'App',
  components: {HellWorld},
};
</script>

并新增一个HelloWorld.vue组件：

代码语言：javascript复制

<template>
  <div @click="message ='!'">{{message}}</div>
</template>

<script>
const data = {
  message:'hi'
}
export default {
  name: 'HelloWorld',
  components: {},
  data: ()=>data,
};
</script>

当单击div时，message尾部追求一个符号。data虽然是一个函数，但是返回的却是一个const对象。const data在项目仅会声明一次，在多个组件实例中是唯一的。

如图所示，单击任何一个组件，其它组件亦受影响：