new Vue()和export default{}區(qū)別

在生成、導出、導入、使用 Vue 組件的時候，像我這種新手就會常常被位于不同文件的 new Vue() 和 export default{} 搞得暈頭轉向。它們含義到底是什么，又有什么異同呢？

new Vue()

首先，Vue 是什么？

我看其他博主的理解，很是贊同-> Vue 就是一個構造函數(shù)，生成的實例是一個巨大的對象，可以包含數(shù)據、模板、掛載元素、方法、生命周期鉤子等選項。

所以渲染的時候，可以使用構造 Vue 實例的方式來渲染相應的 html 頁面：

new Vue({
? ? el: '#app'
? ? ...
})

export default{}

export default{}又是什么呢？

ES6 Module語法中的命令，是為了方便 使用import命令時必須要知道所加載的變量名或函數(shù)名，否則無法加載的問題。

詳情可查看這里

export default命令并不是在每個文件中都是必須的。它的作用只是用于導出模塊，在別的模塊需要調用這個模塊的時候，可以通過import命令引入使用的。

假設我們寫了一個單頁面組件 A 文件，而在另一個文件 B 里面需要用到它，那么就要用 ES6 的 import/export 語法 ，在文件 A 中定義輸出接口 export **，在文件 B 中引入 import，然后再生成一個 Vue 實例 new Vue ()，把引入的組件用起來，這樣就可以復用組件 A 去配合文件 B 生成 html 頁面了。

所以經過查證，發(fā)現(xiàn)兩者之間是沒有任何聯(lián)系的。

import,export和export default注意問題

A.在公用js中，多個方法需要調用的話，可以在vue項目中進行export default，拋出一個變量，然后在vue中引入后來調用使用

1、common.js中

? ? var common = {
? ? //密碼檢測
? ? ? checkPassword:function(password) {
? ? ? },
? ? ? //微信環(huán)境支持
? ? ? verifyWechat:function () {
? ? ? },
? ? ? // ?手機號碼檢測
? ? ? checkPhone:function (param_str) { ?
? ? ? }
? ? };
? ? export default common;

2、在main.js中全局引用

import ?common from ?'../static/js/common'
?Vue.prototype.$common= common;

3、在vue中引用該方法

if(!this.$common.checkPhone(this.nameValue)){
}

B.在公用js中，單個方法需要調用的話，可以在vue項目中進行export，拋出方法名，然后在vue中引入后來調用使用

1、common.js中

? ? //密碼檢測
? ? ? function checkPassword(password) {
? ? ? },
? ? ? //微信環(huán)境支持
? ? ? function verifyWechat() {
? ? ? },
? ? ? // ?手機號碼檢測
? ? ? function checkPhone(param_str) { ?
? ? ? }
? ? };
? ? export{
? ? ? ? common
? ? };

3、在vue中引用該方法

import {common} from ?'../static/js/common'
?if(!common.checkPhone(this.nameValue)){
}

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論