使用vue一段時間，但對有些混亂的地方還不了解，在這里簡單的進行一個記錄，便于理解與歸納 。

1.生命周期

beforeCreate

vue實例的掛載元素$el和數據對象data或者props都為undefined，還未初始化。

created

可以訪問到之前不能訪問到的數據，但是這時候組件還沒被掛載，所以是看不到的

beforeMount

vue實例的$el和data都初始化了，創建虛擬的dom節點
補充：如果頁面存在子組件，會在父組件的beforeMount之后去掛載子組件，當子組件掛載完成的時候才會去執行父組件的mounted

mounted

將VDOM 渲染為真實 DOM 并且渲染數據,vue實例掛載完成.

beforeUpdate

data更新時觸發

updated

data更新時觸發

beforeDestory

實例銷毀之前調用。在這一步，實例仍然完全可用,適合移除事件、定時器等等

destroyed

組件銷毀時觸發，vue實例解除了事件監聽以及和dom的綁定（無響應了），但DOM節點依舊存在

2.組件通信

父子組件通信

父組件通過props傳遞數據給子組件，子組件通過emit發送事件傳遞數據給父組件，從而實現父子組件通信。

父組件 <template><div><square :status="status" @emitColor="changeColor"></square></div> </template> export default {data(){return {status:1}},methods:{changeColor (val) {this.status = val} }} 復制代碼子組件 <template><div><div class="box"><div :class="status===1?'red':'blue'" @click="emitColor"></div><p>點擊方塊更換顏色</p></div></div> </template> export default {name: 'square',props: ['status'],methods:{emitColor () {this.$emit('emitColor', 2)}, }} 復制代碼

3 computed和watch

computed

計算一個新的屬性，不在data中定義，同時，它具有緩存性，只有當依賴發生改變時，才會計算新的值。

<template> <div>計算總和是：{{sum}}</div> <div>計算總和是：{{sum}}</div> </template> ... data() {return {x:10,y:20,} }, computed:{sum: function() {console.log('計算屬性')return this.x + this.y } } 復制代碼

在代碼中，引用了2次{{sum}},但是打印結果只有2次而不是4次，說明在第二次使用{{sum}}時，使用的是之前的緩存值。

注：cumputed與方法比較

<template> <div>計算總和是：{{sum()}}</div> <div>計算總和是：{{sum()}}</div> </template> ... data() {return {x:10,y:20,} }, methods:{sum(){return return this.x + this.y } } } 復制代碼

在代碼中，引用了2次{{sum()}},但是打印4次，說明在第二次使用{{sum()}}時,重新進行了運算，不利于性能的優化。

watch

監聽的是已經存在并且已經掛載vm上的數據，同時，它監聽到值的變化就會執行回調。

<template> </template> ... data() {return {name: 'lucy',info: {height: '178cm',weight: '70kg',age: 20}} }, //幾種watch的用法 watch:{name: function(newValue,oldValue) {... },info:{handler(newValue,oldValue){...},immediate: true,//立即執行deep:true,//深度監聽},'info.age':{handler(newValue,oldValue){...},immediate: true,//立即執行deep:true,//深度監聽} } } 復制代碼

v-show 和 v-if

v-show被控制的元素只是在display:none和block之前切換，DOM元素是存在的；
v-if被操控的元素在渲染與不渲染之間進行切換

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的vue基础知识（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。