为了保证组件内的数据各自独立,不会相互影响,要求每个组件的data必须是函数形式,目的就是把数据放入一个新对象内,这样就不会出现上述问题了。 说这的主要意义就是告诉我们,在 Vue3.x 中的 data 选项总是为函数形式,返回响应式数据。 Vue2.x VS Vue3.x 实例创建 二、函数式组件的变化 在Vue3.x中,functional...
2.vue组件中data为什么必须是一个函数 vue组件可能存在多个实例,如果使用对象形式定义data,可能会导致它们共用一个data对象,那么状态变更会影响所有组件实例,这是不合理的采用函数的形式定义,在initData时会将作为工厂函数返回全新的data对象,有效避免了多个实例之间状态污染的问题。而在vue根实例创建过程中不存在这个限制...
Vue2 的 data 可以是对象,也可以是函数,但 Vue3 的 data 只能是函数,否则报错。 在JS当中实例是通过构造函数来创建的,每个构造函数可以new出很多个实例,那么每个实例都会继承原型上的方法或属性。vue的data数据其实是vue组件原型上的属性,数据存在于内存当中。vue组件为了保证每个实例上的data数据的独立性,规定了...
new Vue()中只有一个data属性,共用该data。 为什么组件中的data必须是一个函数? 因为如果data是一个对象,对象是引用类型,那复用的所有组件实例都会共享这些数据,就会导致修改一个组件实例上的数据,其他复用该组件的实例上对应的数据也会被修改。 如果data是一个函数,函数虽然也是引用类型,但是函数是有作用域的,函数...
1. 本质上,组件的 data 选项只是一个函数 以vite创建的Vue3项目为例 //components/HelloWorld.vueexportdefault{//...data(){return{count:0}}} 可以看到它就是一个普通函数 2. 这个函数会在Vue创建组件实例时被调用 为了更详细的看到在什么时刻调用,可以回到我们之前写的mini-vue3 ...
实现一个订阅者Watcher,可以收到属性的变化通知并执行相应的函数,从而更新视图。 实现一个解析器Compile,可以扫描和解析每个节点的相关指令,并根据初始化模板数据以及初始化相应的订阅器。 4. Vue不能检测数组和对象的变化 因为Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property 必须在 data 对...
观察者。Vue 通过 Observer 对数据对象的所有属性进行监听,当把一个普通对象传给 Vue 实例的data选项时,Observer 将遍历它的所有属性,并为其添加getter和setter。getter将收集此属性所有的订阅者,setter将在属性发生变动的时候,重新为此属性赋值,并通知订阅者调用其对应的更新函数。
在vue3中,data返回的对象会被vue3代理,所以data中的数据都是响应式的。 需要注意的是,数据要在data函数中作为对象返回才可以。 为什么data是一个函数返回对象? 这样可以保证每个组件中,每一次组件创建都是一个新对象。 这样可以让每个组件之间的数据是相互独立的,修改某个组件中的数据,不会影响其他组件。
所以,你现在知道为什么vue组件的data必须是函数了吧。这都是因为js本身的特性带来的,跟vue本身设计无关。其实vue不应该把这个方法名取为data(),应该叫setData或其他更容易理解的方法名。 不要把所有东西都放进data里 Vue组件实例中的data是我们再熟悉不过的东西了,用来存放需要绑定的数据但是对于一些特定场景,data虽...
Vue 3是它的最新版本之一,它不仅在性能,而且在API层面都进行了改进。在Vue 3中,实例化一个组件实例时,你需要使用一个新的选项属性——data函数。 data函数是Vue 3中新引入的一个选项属性,它定义了组件实例中的数据源。与Vue 2中的data选项不同,它现在应该是一个函数,返回一个对象。 其中,data函数中返回的...