VUE實踐總結

channg 發布于2019-08-22 17:56 / 1239人閱讀

摘要：前言本文主要總結了自己實際開發項目當中遇到的一些常見問題以及解決方案組件的是當一個組件被定義，必須聲明為返回一個初始數據對象的函數，因為組件可能被用來創建多個實例。實在要比較只能比較對象的具體值了。

前言

本文主要總結了自己vue實際開發項目當中遇到的一些常見問題以及解決方案

VUE組件的data是function

當一個組件被定義，data?必須聲明為返回一個初始數據對象的函數，因為組件可能被用來創建多個實例。如果?data?仍然是一個純粹的對象，則所有的實例將共享引用同一個數據對象！

解釋：如我們所知，Object是引用類型，如果組件的data是Object就會影響到所有的實例

VUE如何傳遞參數給子組件

對于父組件來說等價于給子組件綁定了一個屬性

// parent.vue

然后子組件需要通過props接收到父組件的參數

// child.vue
props:{
    isShow:{
        type:Boolean,
        default:false
    }
}

VUE子組件如何傳遞參數給父組件

對于數據繞子組件執行一圈又回到父組件的需求是很常見的。

對于子組件來說，子組件處理完邏輯后通過$emit發送一個消息（事件）

// child.vue
methods:{
    logic(){
        this.$emit("someMsg",param1,param2);
    }
}

對于父組件來說，在子組件的"標簽"上監聽這個消息（事件）

// parent.vue

VUE父組件調用子組件的function

// parent.vue

VUE修改數據視圖不更新問題

新手經常會碰到這種情況，我明明改變了這個變量，但是視圖竟然沒有更新，說好的mvvm呢，黑人問號？

產生的原因很可能就是下面這句話了

因為 Vue 無法探測普通的新增屬性 (比如?this.myObject.newProperty = "hi")

細糾一下原因就是，vue的響應式原理是get的時候依賴收集 （添加Watcher），set的時候通知相關的Watcher進行視圖更新，直接給對象添加一條數據自然沒有這個過程，所以自然無法更新視圖啦~

解決方案：Vue.set( target, key, value ) （別名：vm.$set(target, key, value) ）

VUE watch配置注意事項

computed的作用是監聽數據變化計算出屬性，watch的作用就是監聽數據變化執行相應的邏輯，but這里需要注意一下

如果你監聽的是一個對象，你需要這樣

然后還有，因為是對象，所以oldValue!==newValue行不通滴。實在要比較只能比較對象的具體值了。然后這里又容易觸發另外一個問題，數據初始化的時候也會觸發watch，so要做好臨界判斷哦~~

vue生命周期階段詳解

大致可以分為8個階段

beforeCreate：創建前，這個階段組件的$data和$el都為undefined

created：創建完成，這個階段$data已經初始化完成

beforeMount：$el依然為undefined，虛擬dom階段

mounted：$el掛載值

beforeUpdate：組件更新前

updated：組件更新后

beforeDestroy：組件銷毀前

destroy：組件銷毀后

云服務器 GPU云服務器 vue20開發實踐學習實踐架構實踐開發實踐

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/95338.html

前端每周清單年度總結與盤點

摘要：前端每周清單年度總結與盤點在過去的八個月中，我幾乎只做了兩件事，工作與整理前端每周清單。本文末尾我會附上清單線索來源與目前共期清單的地址，感謝每一位閱讀鼓勵過的朋友，希望你們能夠繼續支持未來的每周清單。 showImg(https://segmentfault.com/img/remote/1460000010890043); 前端每周清單年度總結與盤點在過去的八個月中，我幾乎只做了...

jackwang 2019-08-22 15:54 評論0 收藏0
Vue開發總結及一些最佳實踐（已更新）

摘要：基本開發環境創建的項目，作為代碼編寫工具插件推薦插件配置文章目錄項目目錄結構介紹框架選擇處理請求二次封裝項目目錄結構簡介業務相關靜態文件全局組件基礎樣式布局樣式及工具引入請求配置路由全局狀態管理工具文件入口文件主要配置文件頁面檢查配置測試基本開發環境 vue-cli3 創建的項目，vscode 作為代碼編寫工具vscode插件推薦：vscode 插件配置文章目錄項目目錄結構介紹...

NotFound 2019-08-26 13:47 評論0 收藏0
個人分享--web前端學習資源分享

摘要：前言月份開始出沒社區，現在差不多月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了一般來說，差不多到了轉正的時候，會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區，現在差不多9月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了！一般來說，差不多到了轉正的時候，會進行總結或者分享會議！那么今天我就...

sherlock221 2019-08-20 18:59 評論0 收藏0