最近公司要求使用vue.js開發(fā)一款PC端的應用，大約用時4個月完成，在此之前只是了解過vue.js，在項目完成后對vuejs的相關內(nèi)容也有了大致的了解，為了加強自身的記憶，對vue的相關知識進行總結(jié)梳理，方便以后的開發(fā)。如有不足之處請各位道友批評指正。 基礎篇： 先上張xmind思維導圖

注：vue的基本知識內(nèi)容比較多，此處總結(jié)自己認為在vue中比較難理解和重要的知識點 1. vue主要優(yōu)點 a.沒有的復雜的DOM操作：由react發(fā)揚光大的虛擬DOM概念已經(jīng)成為前段開發(fā)中比較火的技術。vue框架當然也不會落后了。 b.優(yōu)雅的數(shù)據(jù)處理： 雙向綁定的數(shù)據(jù)處理延續(xù)了angular最大的優(yōu)點，并且沒有angular中煩人的$scope（自認為） c.官方文檔通俗易懂：中文文檔寫的非常棒（這要感謝我們的尤大神）

2.vue的安裝和基本API vue的安裝需要用到vue-cli,具體步驟請參照國vue官方文檔(cn.vuejs.org/v2/guide/in…) vue的基本API： 指令：v-bind v-model v-text v-html v-for v-if v-show v-click ...這些最基本的指令需要知道它們的作用和使用方法 生命周期函數(shù)：vm.forceUpdate vm.destroy 全局的API：Vue.extend Vue.nextTick Vue.set Vue.delete Vue.directive..... 模板必備的函數(shù)和屬性: data props propsData computed methods watch 詳細api請參照

3.vue實例與生命周期 我們可以把vue的整個應用都看成一個vue的實例:

new Vue({el: '#app',template: '<App/>',components: { App },//vue實例創(chuàng)建created: function () {},//vue掛在DOMmounted:function(){},//vue中數(shù)據(jù)改變后重新渲染updated:function(){},//vue實例銷毀destory:function(){}..... }) 復制代碼

4.vue的組件（全局和局部） 注冊vue的組件的方法有兩種為全局注冊和局部注冊。全局組件減少的代碼的重復率，方便他人閱讀，但是他滿足不了一些特殊的需求，而局部組件能夠補足這個短板。 全局組件：在創(chuàng)建vue實例之后用Vue.component(tagName, options)來注冊個全局組件。如果使用的是.vue文件注冊全局組件可以創(chuàng)建個文件夾，將.vue文件放入文件夾中，新建index.js文件，在index.js文件中添加以下代碼:

//導入你需要注冊的全局組件 import MyTest from './test.vue' // 這里是重點 const Loading = {install: function(Vue){Vue.component('Test',MyTest)} }// 導出組件 export default Test 復制代碼 復制代碼

然后在入口文件main.js中引入你所定義文件夾的位置(假設為components/test)

import Vue from 'vue' import App from './App.vue'// 引入element-ui組件 import ElementUi from 'element-ui' import 'element-ui/lib/theme-default/index.css'// 引入自定義組件。index.js是組件的默認入口 import Test from '../components/test' Vue.use(Test );Vue.use(ElementUi); new Vue({el: '#app',render: h => h(App) }) 復制代碼

全局組件注冊完畢 **局部組件:**可以通過某個 Vue 實例/組件的實例選項 components 注冊僅在其作用域中可用的組件.

5.vue中的computed（計算屬性）和watch（偵聽器） computed計算屬性，用來改變我們某個變量，已達到我們所要的值。例:

<div id="example"><p>Original value: "{{ val}}"</p><p>Computed value: "{{ newVal }}"</p> </div> var vm = new Vue({el: '#example',data: {val: 'test'},computed: {// 計算屬性的 getternewVal : function () {// `this` 指向 vm 實例return val+val}} }) 復制代碼

在這個例子中利用methods也能得到相同的結(jié)果，但computed有個緩存的特性（緩存了初次得到的newVal的值，只有當newVal值再次改變時才會觸發(fā)計算）減少了內(nèi)部的運行次數(shù)。

watch偵聽器Vue 提供了一種更通用的方式來觀察和響應 Vue 實例上的數(shù)據(jù)變動：偵聽屬性（監(jiān)聽某個值（可以是任何類型的值），當值變化時執(zhí)行watch中的函數(shù)）。 **watch與computed比較(watch)優(yōu)點:**watch 選項提供了一個更通用的方法（watch會執(zhí)行回調(diào)），來響應數(shù)據(jù)的變化。當需要在數(shù)據(jù)變化時執(zhí)行其他操作是watch更適合。 **watch與computed比較(computed)優(yōu)點:**當你有一些數(shù)據(jù)需要隨著其它數(shù)據(jù)變動而變動時，很容易濫用watch。此時，更好的做法是使用計算屬性而不是命令式的 watch 回調(diào)。 例子如下:(cn.vuejs.org/v2/guide/co…)

原理篇

原理篇 本章是以上一章為基礎上來深入理解vuejs的設計思想， vue中比較出彩的是虛擬DOM，響應式數(shù)據(jù)數(shù)據(jù)操作（數(shù)據(jù)雙向綁定）以及豐富的生態(tài)庫（vue-router vuex iview....）。 1.vue中的響應式數(shù)據(jù) 在數(shù)據(jù)雙向綁定這個理念出來之前，前端中都是使用jQuery或原生js操作DOM來實現(xiàn)數(shù)據(jù)變化。這不僅實現(xiàn)過程麻煩，也對頁面的性能有很大的影響。vue框架中的核心理念就是響應式，因此了解響應式的原理可以幫助我們解決vue中遇到的大部分問題，也能加深我們對vue的了解。

原理 vue響應式原理是靠Object.defineProperty實現(xiàn)的 這個方法會在對象上添加新的屬性，或者修改對象上的屬性并返回這個對象。詳細可以查看MDN Object.defineProperty(obj,prop,descriptor) obj要在其上定義屬性的對象。 prop要定義或修改的屬性的名稱。 descriptor將被定義或修改的屬性描述符

實現(xiàn) 在New vue()創(chuàng)建后，數(shù)據(jù)初始化開始，使用Object.defineProperty方法實現(xiàn)響應式 第一步先要遍歷vue data中所有的變量

function observer (value) {if (!value || (typeof value !== 'object')) {return;}Object.keys(value).forEach((key) => {defineReactive(value, key, value[key]);}); }復制代碼 第二步將每個變量實現(xiàn)響應式 復制代碼 Object.defineProperty(obj, key, {//key data中定義的數(shù)據(jù)enumerable: true,configurable: true,//數(shù)據(jù)的讀取時調(diào)用get: function reactiveGetter () {return val; },//數(shù)據(jù)的改變時調(diào)用set: function reactiveSetter (newVal) {if (newVal === val) return;cb(newVal);}}); } 復制代碼

感興趣的同學可以自己試著實現(xiàn)一個響應數(shù)據(jù) 依賴收集追蹤 在vue中數(shù)據(jù)的變化會觸發(fā)視圖更新，視圖變化會同時改變數(shù)據(jù)。這種情況看似是響應式的全部，但有種情況，當data中的某個數(shù)據(jù)不用顯示在視圖上并且他會不斷的變化。這時如果視圖不斷的更新顯然不合理，我們需要能夠判斷某個數(shù)據(jù)的變化是否有必要更新視圖。

2.vue中實現(xiàn)Virtual DOM過程 Vue中 的虛擬DOM操作是其核心概念之一，其實質(zhì)就是將vue render函數(shù)轉(zhuǎn)化成Vnode節(jié)點。然后用JavaScript中對象的形式表示，以JavaScript中對象的屬性來描述vnode節(jié)點。

獲取Vue 組件（假設如下組件）

<template><p class="demo" v-if="isShow">This is a span.</p> </template> 復制代碼

解析vue組件（轉(zhuǎn)換后）

{tag: 'p',data: {/* 指令集合數(shù)組 */directives: [{/* v-if指令 */rawName: 'v-if',expression: 'isShow',name: 'show',value: true}],/* 靜態(tài)class */staticClass: 'demo'},text: undefined,children: [/* 子節(jié)點是一個文本VNode節(jié)點 */{tag: undefined,data: undefined,text: 'This is a span.',children: undefined}] } 復制代碼

內(nèi)部的具體實現(xiàn)過程可參見《實現(xiàn) Virtual DOM 下的一個 VNode 節(jié)點》。

轉(zhuǎn)載于:https://juejin.im/post/5afe29456fb9a07ab1116683

總結(jié)

以上是生活随笔為你收集整理的vue.js的使用总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。