时间:2021-05-26
问题
项目里遇到一个问题,用this.$options.data()重置组件data时,data()里用this获取的props或method都为undefined,代码简化如下:
export default { props: { P: Object }, data () { return { A: { a: this.methodA }, B: this.P }; }, methods: { resetData () { // 更新时调用 Object.assign(this.$data, this.$options.data()); // 有问题!!! }, methodA () { // do sth. }, methodB () { // 通过用户操作调用 this.A.a && this.A.a(); // this.A.a is undefined, this.B is undefined!!! } }}调用resetData()之后,再调用methodB()时,this.A.a和this.B是undefined。
解决
resetData里这样写:
resetData () { // 更新时调用 Object.assign(this.$data, this.$options.data.call(this));}原因
和Vue实例的初始化相关。(源码version2.6.10)
1、new Vue的时候传了一个对象,把该对象记为options,Vue将options中自定义的属性和Vue构造函数中定义的属性合并为vm.$options,vm.$options.data()中的this指向vm.$options,而methodA和B并没有直接挂在vm.$options下,所以this.methodA和this.B为undefined。
// 创建一个vue实例const options = { customOption: 'foo', data () { A: this.methodA }, methods: { methodA () {} }, created: function () { console.log(this.$options.customOption) // => 'foo' }};new Vue(options); // src/core/instance/init.jsinitMixin (Vue: Class<Component>) { const vm: Component = this // ... vm.$options = mergeOptions( resolveConstructorOptions(vm.constructor), options || {}, vm ) // ...}2、然后将vm.$options.data映射到vm._data,使得可以通过vm._data访问数据,在映射过程中,通过call将data()的this指向当前的实例vm,并将data()的执行结果返回,因为prop和methods的初始化在data之前,所以这时vm上已有_props和_methods,可以拿到this.methodA和this.B。(vm.key如何实现vm._props.key效果见3)。
// src/core/instance/state.jsinitState (vm: Component) { // ... const opts = vm.$options if (opts.props) initProps(vm, opts.props) if (opts.methods) initMethods(vm, opts.methods) if (opts.data) { initData(vm) // 里面通过getData(data, vm)改变this } // ...} getData (data: Function, vm: Component): any { // ... try { return data.call(vm, vm) // this替换为vm } // ...}3、上面把属性映射到了vm._data里,可以通过vm._data.A访问数据,Vue再通过一个代理方法使得vm.A可以直接访问A。
// src/core/instance/state.jsproxy(vm, `_data`, key); proxy (target: Object, sourceKey: string, key: string) { sharedPropertyDefinition.proxyget = function proxyGetter () { return this[sourceKey][key] } sharedPropertyDefinition.set = function proxySetter (val) { this[sourceKey][key] = val } Object.defineProperty(target, key, sharedPropertyDefinition)}总结
data()中若使用了this来访问props或methods,在重置$data时,注意this.$options.data()的this指向,最好使用this.$options.data.call(this)。
以上这篇Vue中的this.$options.data()和this.$data用法说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
如下所示:在组件上添加属性this.$set(this.data,"obj",value');删除属性this.$delete(this.data,"obj",
首先,vue基础js写法newVue({el:"#app",//模型data:{},filters:{},mounted:function(){this.$ne
script中。letdata={....};leturl=xx;方法各异:GET:this.$ajax.get(url,{params:data}).then
如下所示:exportdefault{data(){return{theme:this.$store.state.app.themeColor};},mount
效果:代码展示:顶部通知exportdefault{data(){return{msg:''}},methods:{toNotify(){this.$notif