Antecedentes: la componenteización de Vue es su característica. A menudo definimos componentes y sabremos que los datos del componente se definen como una función, y también sabemos que es para evitar la contaminación de datos, pero la instancia raíz no es obligatoria (porque el la instancia raíz es un singleton, no se preocupe por la contaminación de datos), ¿cuál es el motivo específico? Analicémoslo también desde el código fuente. Para obtener detalles, consulte el código fuente: el método initData() en src/core/instance/state.js. Por supuesto, también usamos la demostración para ilustrar. La demostración es la siguiente:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue data</title>
</head>
<body>
<div>vue组件data为什么必须是个函数而Vue的根实例则没有限制？源码中详见：src/core/instance/state.js中的initData()</div>
<div id="demo">
<div>vue组件data为什么必须是个函数?</div>
<comp></comp>
<comp></comp>
<div>{
{counter}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('comp',{
template:'<div @click="counter++">{
{counter}}</div>',
// data: {counter: 0}如果这么定义首先会报错，要求data为函数，原因是为了避免多个组件数据互相影响，造成数据污染，一会从源码中解释
data () {
return {
counter:1
}
}
})
//创建实例
const app = new Vue({
el: '#demo',
data:{counter:1}
});
console.log(app.$options.render);
</script>
</body>
</html>
1. La razón por la cual el código fuente explica que los datos del componente deben ser una función es la siguiente:
De lo anterior se puede ver que si el componente no usa la función, los datos se compartirán y se contaminarán.
2. Acabo de decir que no hay límite para los datos del componente raíz. Uno es porque const app = new Vue({el:'#demo'}) es un singleton. Además, también se puede analizar desde el código fuente de la siguiente manera: /src/core/instance/ init.js
Al agregar un punto de interrupción a mergeoptions, se encuentra que la compilación personalizada se ejecutará primero y luego se ejecutará el componente raíz. La ubicación del código fuente: /src/core/util/options.js. Para obtener más información, consulte la combinación estrategia, de la siguiente manera:
De lo anterior se puede ver que cuando la máquina virtual no existe al usar el componente personalizado, se toma la decisión. Si se crea la instancia del componente raíz, la detección de condición no se realizará, por lo que los datos en el componente raíz no debe definirse como una función.
En resumen, se extraen las siguientes conclusiones:
Puede haber múltiples instancias de componentes de Vue, y definir datos directamente en forma de objetos hará que los componentes compartan un objeto de datos, y los cambios de estado afectarán a todas las instancias de componentes, lo cual no es razonable. En forma de función, se usará como una función de fábrica para devolver un nuevo objeto de datos cuando initData, evitando el problema de contaminación de estado entre instancias. Sin embargo, esta limitación no existe durante la creación de la instancia raíz de vue, porque solo hay una instancia raíz y no hay necesidad de preocuparse por este problema.
En resumen, explica por qué los datos de los componentes personalizados de vue deben definirse como una función, pero la instancia raíz no tiene esta limitación. Espero que sea útil para todos. Lo anterior, gracias.