为实例property设置作用域

为实例property设置作用域

目的：希望数据在Vue的所有实例中都可以使用。

Vue.prototype.$appName = 'My App'

​​$appName​​在Vue实例创建之前就可以使用。

main.js

import Vue from 'vue'import App from './App'Vue.prototype.$test = 'test'App.mpType = 'app'const app = new Vue({ store, ...App})app.$mount()

App.vue

控制台打印结果：

test // from beforeCreatetest onLaunch 01.............. // from onLaunchtest // from onLaunch

$test 为何以$开头？

$是在VUE所有实例中都可用的property的一个简单约定。这样可以避免被定义的数据、方法、计算属性产生冲突。

复现冲突

main.js

import Vue from 'vue'import App from './App'Vue.prototype.test = 'test'App.mpType = 'app'const app = new Vue({ store, ...App})app.$mount()

App.vue

控制台打印结果：

test // from beforeCreate (main.js)test onLaunch 01.............. // from onLaunch (App.vue)this is a test // from onLaunch (App.vue)

App.vue 与 main.js同时包含变量test，加载App.vue时，App.vue中的test值会覆盖main.js中的test值。

$为实例property设置作用域来避免冲突发生。

复现问题：undefined

main.js

import Vue from 'vue'import App from './App'Vue.prototype.$test = 'test'App.mpType = 'app'const app = new Vue({ store, ...App})app.$mount()

App.vue

控制台打印结果：

undefined // from beforeCreate (main.js does has $test rather than test)test onLaunch 01.............. // from onLaunch (App.vue)this is a test // from onLaunch (App.vue)

beforeCreate 是创建App.vue之前加载来自main.js中的变量值，如果main.js不存在该变量，则返回undefined。

参考：​​https://cn.vuejs.org/v2/cookbook/adding-instance-properties.html​​

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。