在实例化过程中,Vue会调用组件定义中的data函数,并将返回的对象作为组件实例的一个属性,即this.$data。这样,我们就可以通过this.$data来访问和修改组件内部的数据了。 其次,使用函数返回data对象的好处是可以确保每个组件实例都有一个独立的数据对象。如果我们直接将一个对象字面量赋值给data选项,那么所有的组件实例...
在Vue中,data是一个用于存储组件内部数据的对象。当我们定义一个组件时,需要在data中返回一个对象,而不是直接赋值一个对象。这是因为在Vue中,data是一个函数,而不是一个普通的对象。 为什么data需要使用一个函数而不是直接赋值一个对象? Vue中的组件是可复用的,当我们在多个地方使用同一个组件时,如果直接将data...
bus.$on("id-selected", function (id) { console.log(this); this.value = id; console.log("组件B接收到组件A的值为:" + id); }); 可以发现组件B内是可以获取到传递的id值的,但是组件B的value并没有赋值成功,而$on匿名函数内的this指向跟data(){}中的this指向不同,也就是说作用域不同,导致v...
在data里定义Object类型的变量时,会发现Object中访问不到vue的this属性。 例如: 1 export default { 2 data(){ 3 return { 4 a: "123", 5 b: { 6 c: this.a 7 } 8 }; 9 }, 10 created() { 11 console.log("b: ", this.b.c); // undefined 12 } 13 } 想在b中访问this.a的数据,...
使用arrow函数在Vue中初始化data() 你可以通过this.expired()而不是this.expired访问它 new Vue({ el: '#app', data () { return { labelEnable: "a", expired: () => [1, 3], } }, mounted() { console.log(this.expired()) }}) {{ elem }} Vue 3-“this”不可访问/“this”指向错误...
在initMixin函数中,Vue原型上定义了_init 方法,其中的多数代码都去掉了,merge options注释 ,这个是在初始化时会把el / data / props / methods 上边的所有属性都合并到 实例的$options上去 (vm.$options),如何合并的会在以后文章中讲到。 继续往下,又会看到一系列初始化的函数, 本篇文章主要介绍下initState(vm...
data() { return { message: 'Hello' } } 为什么要把data变成函数并return属性呢? 组件是一个可复用的实例,当你引用一个组件的时候,组件里的data是一个普通的对象,所有用到这个组件的都引用的同一个data,就会造成数据污染。 将data封装成函数后,在实例化组件的时候,我们只是调用了data函数生成的数据副本,避免...
为什么vue中data需要使用return返回数据呢? 答:因为不使用包裹的数据会在项目的全局可见,造成变量污染;使用return包裹后数据中变量只在当前组件中生效,不会影响其他组件。 1、在简单的vue实例中看到的Vue实例中data属性,如下所示: letapp=newVue({ el:"#app", ...
Vue 项目开发中，在data中定义的数据可以通过this获取，甚至this上也挂载着$data，$el，方便用户开发时直接使用this操作。例如，$el官方文档 中描述：该组件实例管理的 DOM 根节点 根据上一篇文章《createApp之后发生了什么？》中示例，修改App.js中App，window.self = null;export const App = { render() { ...
return value } 用this读取data中数据时,会触发getter函数,在其中通过var value = getter ? getter.call(obj) : val;获取到值后执行return value,实现读取数据的目的。 但是在其间还有一段代码,在这段代码中会经过一系列复杂的逻辑运算来收集依赖。这里不介绍如何收集依赖,如果想了解可以看这篇专栏。这里只要知道...