vue.js

基礎：

Vue構造器：Vue.extend(options)

• 是vue構造器的擴展，調用Vue.extend創建的是一個vue構造器。參數是一個包含組件選項的對象。
• options中的屬性:
  • template屬性用于定義組件要渲染的html。在vue.extend()的選項中data必須是函數；
• 注意：調用vue.extend生成的是一個組件構造器，不能直接拿來渲染的，必須要使用vue.component來進行注冊；

全局組件：Vue.component()

• 參數：2個：
  • 第一個參數：組件的標簽；
  • 第二個參數是組件構造器；
  • 組件應當掛載到某個vue實例上，否則不會生效；

Vue.component('組件名'，{ 
    // 選項（組件）
})

組件語法糖：

• 由于以上注冊組件的過程過于繁雜，vue提供了注冊語法糖：使用vue.component()直接創建和注冊組件；
• 用法：vue.component(name, options)
• 參數:
  • name: 組件標簽名；
  • options:選項對象

Vue.set(target,key,value)/this.$set(target,key,value)

• 應用場景：當生成VUE實例后，修改date中屬性的值有時視圖并不會同步更新，（即如果在實例創建后添加新的屬性到實例上，他不會觸發視圖更新）
• 原因：Vue的雙向綁定時基于set和get的
• 解決方法：使用Vue.set/this.$set來添加新屬性；
• Vue.set(target,key,value)
• 參數：
  • target: 要添加屬性的對象（目標對象）
  • key: 要添加的屬性
  • value：屬性值
    -eg:

  <ul>
    <li><span>正常類: {{earnings.a}}</span><span></span></li>
    <li><span>寶寶類: {{earnings.b}}</span><span></span></li>
    <li><span>活期存款: {{earnings.c}}</span><span></span></li>
  </ul>
  <button @click="getNum"></button>

  export default {
    data () {
      return {
        earnings: {},
        }
    },
    methods: {
        getNum () {
            this.earnings.a = 1
            this.earnings.b = 2
            this.earnings.c = 3
        }
    } 
// 1.如上點擊button按鈕，視圖不會更新；
// 2.將getNum函數改寫成如下形式，即可式對象earnings的屬性變成響應式的
   getNum () {
       this.$set(earnings, 'a', 1)
       this.$set(earnings, 'b', 2)
       this.$set(earnings, 'c', 3)
   }

this.$nextTick([callback, context])/Vue.nextTick([callback, context])

• 應用場景：有時我們通過更改數據 配合v-html更新dom,然后獲取更新后的dom，但 數據更新后dom不會馬上更新完成，此時就應用到了this.$nextTick;
• 作用：在下次Dom更新循環結束之后執行回掉，在數據更新之后立即調用該方法，獲取更新后的Dom;

理解：

• vue.js是一個構建數據驅動的web界面的庫。Vue.js的目標是通過盡可能簡單的API實現響應的數據綁定和組合的視圖組件
• vue.js自身并不是一個全能框架，它只聚焦于視圖層。因此學習起來比較容易，它也非常容易和其他庫已有項目整合。另一方面，在與相關工具和支持庫一起使用市，vue.js也能完美驅動復雜的但也應用。
• vue.js的核心是一個響應的數據綁定系統，它讓數據與Dom保持同步非常簡單。在使用jquery手動操作DOM時，我們的代碼常常是命令式的，重復的與易錯的，vue.js用數據驅動的視圖的概念，通俗的講，將意味著我們在普通的HTML模板中使用特殊的語法將DOM‘綁定’到數據層，一旦創建了綁定，DOM將和數據保持同步。每當修改了數據，DOM便相應的更新。這樣我們應用中的邏輯幾乎都是修改數據了，比與DOM更新攪在一起。這讓我們的代碼更容易撰寫，理解與維護

vue.js中使用到的兩個重要函數。

• Object.defineProperty(object, propertyname, decriptor)
• eg: 添加屬性訪問器

var obj = {},newVal;
 // Add an accessor property to the object.
 Object.defineProperty(obj, "name", {
     set: function (x) {
         console.log("in property set accessor" + newVal);
         this.firstName= x;
     },
     get: function () {
         console.log("in property get accessor" + newVal);
         return this.firstName;
     },
     enumerable: true,
     configurable: true
 });

vue和angular的

vuex嚴格模式

開啟嚴格模式；

const store = new Vuex.Store({
  // ...
  strict: true
})

JSlint語法要求

• 代碼文檔結尾要留白一行；
• 一句代碼結尾不能用 ‘；’，不能有空格
• 注釋格式‘空格 // 注釋內容’

嚴格模式中this的指向

• 嚴格模式中自調用函數this不指向window，指向undefined

bind

• 和apply， call作用類似，只是bind不會改變原函數的this指向，他會返回一個新的函數，改變新函數的this指向為指定的值，新函數的函數體和原函數一樣

• eg

this.x = 9; 
var obj = {
  x: 81,
  getX: function() { return this.x; }
};

obj.getX(); // 返回 81

var retrieveX = obj.getX;
retrieveX(); // 返回 9, 在這種情況下，"this"指向全局作用域

// 創建一個新函數，將"this"綁定到module對象
// 新手可能會被全局的x變量和module里的屬性x所迷惑
var boundGetX = retrieveX.bind(obj);
boundGetX(); // 返回 81

路由懶加載；

• 使用原因：使用vue寫單頁面應用時，會出現打包后javascript包非常的大，影響頁面加載，可以用路由懶加載的方法去優化路由，當用到某個路由時在去加載對應的模塊；

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: resolve => require(['components/Hello.vue'], resolve)
    },
    {
        path: '/about',
        component: resolve => require(['components/About.vue'], resolve)
    }
  ]
})

vue中watch

• 用來添加監視，其值為一個對象，要觀察的數據以鍵值的形式寫入其中，（一個對象，鍵是需要觀察的表達式，值是對應回調函數。值也可以是方法名，或者包含選項的對象。Vue 實例將會在實例化時調用 $watch()，遍歷 watch 對象的每一個屬性。）
  • 鍵為要觀察的數據，值為一個函數表達式，函數表達式有兩個參數；第一個為新值，第二個為老值（變化前的值），
  • 當藥觀察的數據發生改變時，會執行對應鍵的函數表達式；

element-ui

• 模態框可以通過 v-model來呼出，取值為boolean

es6向外暴露模塊的方法；

• export
  • export { 要暴露的變量名 }
  • export var/ const/let 變量名 = 對象/function
• export default = obj
• module exports = object/function

eg:

1.第一種方法：
const form = {
  id: input().protect(true).value(),
  name: RI().label('姓名').val('').type('text').checkDefault().value(),
    
    }
    
export { form } // 向外暴露一個form對象

app.use()

• 參數：obj|function
• 安裝vue.js插件式如果插件是一個對象，必須提供install方法，如果插件是一個函數，那么它會被作為install方法，install方法將被作為vue的參數；

vue的特殊屬性

slot ：內容分發插槽

• 具名插槽/和匿名插槽： 可以使用元素的一個特殊屬性name來配置如何分發內容，將給據name屬性來進行內容匹配，可以使用一個匿名插槽作為默認插槽，負責匹配不到插槽的能容將被拋棄。
• eg:

- 假定有一個app-layout組件，其模板為：

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>
- 父組件模板：

 <app-layout>
  <h1 slot="header">這里可能是一個頁面標題</h1>
  <p>主要內容的一個段落。</p>
  <p>另一個主要段落。</p>
  <p slot="footer">這里有一些聯系信息</p>
</app-layout>

- 選人結果為：

<div class="container">
  <header>
    <h1>這里可能是一個頁面標題</h1>
  </header>
  <main>
    <p>主要內容的一個段落。</p>
    <p>另一個主要段落。</p>
  </main>
  <footer>
    <p>這里有一些聯系信息</p>
  </footer>
</div>

• 注意：如果子組件中沒有匿名插槽，那么匹配不到插槽的那部分內容將被拋棄

計算屬性

• 使用計算屬性的原因：模板內表達式是非常便利的，但是他們實際是用于簡單運算的，在模板中放入太多邏輯會讓模板過重且難以維護。
• eg:

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

• 計算屬性（computed）VS被觀察的屬性
• 當某一個值A依賴于另外兩個值BC且，當BC中任意一個值發生改變是A的值也要發生改變，此時使用計算屬性，比watch更簡潔。
• eg:

<div id="demo">{{ fullName }}</div>

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

//上面代碼時命令式的和重復的，使用計算屬性書寫如下，會變得簡潔明了

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

• 何時使用watch？
  • 當你想要在數據變化響應時，執行一步操作，或者開銷較大的操作時使用。

ES6新增的數組方法：

• reduce( function(accumulator, currentValue, currentIndex, array), initialValue) ：為數組中的每一個元素一次執行回掉函數，不包括數組中被刪除的或者從未被賦值的元素
• 參數：
  • callback :執行數組中每個值的函數
    • 參數四個：accumulator：上一次 回掉的返回值
    • currentValue：正在處理的元素
    • currentIndex：正在處理的元素的索引
    • array: 調用reduce的數組
  • initialValue ：可選項，氣質用于地磁調用callback的第一個參數，如果沒有設置初始值，則將數組中的第一個元素作為初始值，空數組調用reduce

總結：數組中的元素每次執行callbak函數會將return的值賦給accumulator

webpack config文件配置

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin'); //css單獨打包
var HtmlWebpackPlugin = require('html-webpack-plugin'); //生成html


var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'src'); //__dirname 中的src目錄，以此類推
var APP_FILE = path.resolve(APP_PATH, 'App.jsx'); //根目錄文件app.jsx地址
var BUILD_PATH = path.resolve(ROOT_PATH, '/pxq/dist'); //發布文件所存放的目錄

module.exports = {
    devtool: 'cheap-module-eval-source-map',
    entry: {
        app: APP_FILE
    },
    output: {
        publicPath: '/pxq/dist/', //編譯好的文件，在服務器的路徑,這是靜態資源引用路徑
        path: BUILD_PATH, //編譯到當前目錄
        filename: '[name].js', //編譯后的文件名字
        chunkFilename: '[name].[chunkhash:5].min.js',
    },
    module: {
        loaders: [{
            test: /\.js$/,
            exclude: /^node_modules$/,
            loader: 'babel',
            include: [APP_PATH]
        }, {
            test: /\.css$/,
            exclude: /^node_modules$/,
            loader: ExtractTextPlugin.extract('style', ['css', 'autoprefixer']),
            include: [APP_PATH]
        }, {
            test: /\.less$/,
            exclude: /^node_modules$/,
            loader: ExtractTextPlugin.extract('style', ['css', 'autoprefixer', 'less']),
            include: [APP_PATH]
        }, {
            test: /\.scss$/,
            exclude: /^node_modules$/,
            loader: ExtractTextPlugin.extract('style', ['css', 'autoprefixer', 'sass']),
            include: [APP_PATH]
        }, {
            test: /\.(eot|woff|svg|ttf|woff2|gif|appcache)(\?|$)/,
            exclude: /^node_modules$/,
            loader: 'file-loader?name=[name].[ext]',
            include: [APP_PATH]
        }, {
            test: /\.(png|jpg)$/,
            exclude: /^node_modules$/,
            loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]',
            //注意后面那個limit的參數，當你圖片大小小于這個限制的時候，會自動啟用base64編碼圖片
            include: [APP_PATH]
        }, {
            test: /\.jsx$/,
            exclude: /^node_modules$/,
            loaders: ['jsx', 'babel'],
            include: [APP_PATH]
        }]
    },
  plugins: [
    new htmlwebpackPlugin({ // 生成html文件配置；
      // 生成html文件的名字，路徑和生產環境下的不同，要與修改后的publickPath相結合，否則開啟服務器后頁面空白
      filename: 'index.html',
      // 源文件，路徑相對于本文件所在的位置
      template: path.resolve(__dirname, 'index.html'),
      // 需要引入entry里面的哪幾個入口，如果entry里有公共模塊，記住一定要引入
      // chunks: ['vendors', 'index'],
      // 要把<script>標簽插入到頁面哪個標簽里(body|true|head|false)
      // inject: 'body',
      // 生成html文件的標題
      // title: ''
      // hash如果為true，將添加hash到所有包含的腳本和css文件，對于解除cache很有用
      // minify用于壓縮html文件，其中的removeComments:true用于移除html中的注釋，collapseWhitespace:true用于刪除空白符與換行符
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin() // 錯誤提示；
  ],
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias:{
      // 'vue$': 'vue/dist/vue'
    }
  }

}

• 配置文件解釋：
• loader 配置中的include/exclude：
  • include 表示哪些目錄中的文件需要進行打包
  • exclude 表示哪些目錄中的 .js 文件不要進行那些目錄中的文件不需要進行打包

vue.use

• 安裝vue.js的插件，如果插件是一個對象，必須提供install方法，如果插件是一個函數，他會被作為install方法。install方法將會被vue參數調用；當一個install方法被一個vue插件多次調用，他只會被安裝一次

VUE注意點：

• vue-router
  • 注意vue-router的參數：為一個對象{routes: 路由配置對象組成的數組}
• 固定寫法：

Vue.use(VueRouter)

let router = new VueRouter({
  routes: routers
})
new Vue({
  el: '#app',
  router
})

vuex:

• 是一個專為Vue.js開發的狀態管理模式 。它采用集中式存儲管理應用的所有組件狀態，并以相應的規則保證狀態以一種可預測的方式發展變化。
  • 狀態管理模式分為一下機部分：
  • state, 驅動應用的數據源；
  • view, 已聲明方式將state映射到視圖；
  • actions, 響應在view上的用戶輸入導致的狀態變化。

• 什么時候回用到vuex？

  • 當我們遇到多個組件共享狀態是，單向數據流的簡潔性很容易遭到破壞：（1，多個視圖依賴于同一狀態； 2， 來自不同行為的視圖需要變更同一狀態。）

  • 我們經常會采用子組件直接引用或通過事件來變更來同步組狀態的多份拷貝

總結：此時我們會把組件的共享狀態抽取出來，以一個全局的單列模式進行管理。

• 安裝 ：vuex屬于第三方插件，毫無疑問要使用Vue.use()進行注冊安裝，通過在根實例中注冊store選項，改store實例會注入到根組件下的所有子組件中，在子組件中通過this.$store可以訪問到store實例
  eg:

let store = new Vuex.Store({ // 注意Store要大寫
  state:{
    count: 0
  },
  mutations: {
    add(state){
      state.count++
    }
  }
})


new Vue({
  el: '#app',
  router,
  store  //在根實例中通過store選項注冊 
})

• 核心概念：
  • state: 單一狀態樹：vue用一個對象包含了全部應用的層級狀態， 至此它便作為一個“唯一的一個數據源（SSOT）”而存在。而這也意味著每個應用將僅僅只包含一個store實例。單一狀態樹讓我們能夠直接地定位任意特定的狀態片段，在調試過程中也能輕而易舉地取得整個當前應用的狀態快照。

get/set

• get語法將一個對象屬性綁定到查詢該屬性時將被調用的一個函數上; 被綁定的函數必須不帶參數。

  • 語法：

   {get prop (){...}}
   
   {get [expression](){...}}
   
  

  • 參數：prop：要綁定到給定函數的屬性名
  • 從ECMAScript 2015 (ES6)開始，還可以使用一個計算的屬性名的表達式綁定到給定的函數

• set 將對象屬性綁定到要調用的一個函數上，當嘗試設置該屬性時調用函數；被綁定的函數必須有一個明確的參數
  -語法：

{set prop(val) {....}}

{set [expression](val) { . . . }}

• 參數：
  • prop :要綁定到給定函數的屬性名。
  • val: 用于保存嘗試分配給prop的值得變量的一個別名
  • expression： 從ECMAScript 2015 (ES6)開始，還可以使用一個計算的屬性名的表達式綁定到給定的函數。

臟檢查原理分析：

• $watch對象： Angular每一個綁定到UI的數據，就會有一個$watch對象，這個對象包含三個參數：

watch = {
    name: '' // 當前watch對象觀察的數據名
    getNewValue: function($scope){
        ....
        return newValue;
    },
    listener: function(newValue, oldValue){ // 當數據發生改變是需要執行的操作。
        
     .....    
    }    
}

getNewValue()可以得到當前$scope上的最新值，listener函數得到新值和舊值并進行一些操作。

我們在使用angular的時候，listener一般都為空，只有當我們需要檢測更改事件的時候，才會顯示的添加監聽。

每當我們將數據綁定到UI上，angular就會向你的watchList上插入一個$watch

• 臟檢查：瀏覽器并沒有提供數據檢測的API，故而內存的任何數據變動（UI事件，ajax請求，timeout等回調操作導致的數據變動）都無法被Listener,但我們可以基于這些大部分能夠產生數據變動的事件進行封裝（如：click, mouseenter, Timeout,....）,在每次事件發生后，執行完事件后，檢查一遍數據的變化，如果數據和上次的值有變化，則執行這個值（注冊時）對應的callback(框架中)，這個callback可能是view層的一個數據表現，也可能是一段處理function;同時在檢查的時候，由于你并不知道這個事件是對那些數據進行了更改，以及這個事件可能造成事件之外其他任何地方的數據更改，所以必須進行一次大檢查，將所有注冊過的值全部檢查一遍，一次檢查稱為一個周期，每次檢查至少兩遍，第二遍用來確認前一遍變動中是否有數據變動導致了其他數據的變動，如果第二次有變動的話，會才執行一遍，知道最后兩次完全一致，才停止檢查。

即遍歷watchList

Object的屬性和方法

object.defineProperty() ：在對象上定義一個新屬性，或者修改對象現有的屬性，并返回這個對象。

• 語法:

Object.defineProperty(obj, prop, descriptor)

• 參數：

  • obj: 需要被操作的目標對象。
  • prop: 目標對象需要定義或者修改的屬性名稱。
  • descriptor: 將被定義的屬性的描述符，其取值如下：
  1. configurable :當且僅當改屬性的configurable為true時，改屬性描述符才能夠被改變，同時該屬性也能從對應的對象上被刪除。默認為false,
  2. 當且僅當改屬性的enumerable為true時，該屬性才能出現在對象的枚舉屬性中。默認為false
  3. value: 該屬性對應的值?？梢允侨魏斡行У膉avascript值（數值，對象 ，函數等）。默認為undefined.
  4. 當且晉檔該屬性的write值true時，該屬性才能被賦值運算符改變。默認為false.
  5. get ： 一個給屬性提供getter的方法，如果沒有getter則為undefined.改方法返回值被用作屬性值。默認為undefined.
  6. set： 一個給屬性提供setter的方法，如果沒有setter則為undefined.該方法接受唯一個參數，并將改參數的新值分配給改屬性。默認為undefined.

• 返回值： 被傳遞給函數的對象；

vue-cli 生成項目：

• 安裝vue-cli :npm
• vue init webpack 項目名稱
• eslint規則（默認）：
  • no-unused-expressions：1 （不允許短路求值，不允許三目運算），要在eslint配置文件中手動加1更改成0
• 腳手架生成的項目默認是不能打包sass文件的，要想打包sass文件需需執行以下步驟：
  • 安裝node-sass,和sass-loader模塊
  • 在webpack.base.conf.js文件添加一條打包規則：

      {
        test: /\.scss$/,
        include: '/src/',
        loaders: ['style-loader','css-loader','sass-loader']
      }

• 注意不要動 utils.js中的如下配置，就默認是scss語法

  
  
  image.png

git常用指令：

git 新建項目流程：

• 創建遠程倉庫；
• 在本地創建一個文件夾，
• 初始化本地倉庫：git init
• 添加工作區的文件到暫存區：git add .
• 連接遠程倉庫：git remote add origin 遠程倉庫地址
• 取回遠程倉庫的變化并與本地分支合并：git pull origin master
• 提交暫存區代碼到本地倉庫區：git commit -m '注釋'
• 提交本地倉庫代碼到遠程倉庫：git push origin master
• 將本地創建的新分支并切換到改分支：git checkout -b 新分支名
• 將本地創建的新分支推送的遠程服務器：git push --set-upstream origin 分支名

特殊指令匯總

• 將遠程倉庫里制定分支拉去到本地（本地尚不存咋該分支）：
  • git checkout -b 要拉取的分支 origin/要拉取的分支
  • 拉去成功會在本地生成一個新分支并并自動切換到改分支上，若出現如下提示：

     fatal: Cannot update paths and switch to branch 'dev2' at the same time.
     Did you intend to checkout 'origin/dev2' which can not be resolved as commit?
    

    則先要執行： git fetch ,然后在執行上一步的命令；
• 強制push(一般僅用與初次創建項目時):
  • git push -u origin master -f

axios：

• axios不是vue的第三方插件，所以不能使用vue.use()來注冊，要利用prototype屬性，將它添加到vue的原型中。vue.prototype = axios

360瀏覽器幫客戶控制內核的方法：

若頁面需默認用極速核，增加標簽：<meta name="renderer" content="webkit"/> 
若頁面需默認用ie兼容內核，增加標簽：<meta name="renderer" content="ie-comp"/> 
若頁面需默認用ie標準內核，增加標簽：<meta name="renderer" content="ie-stand"/>

js中的繼承：

• 通過原型鏈繼承：

function fun1(){
    this.name = '小豬'
}

fun1.prototype.getAge = function(){
    alert(this.name)
}

function fun2(){
    this.name = '皮皮鱔'
}
fun2.prototype = new fun1()

// 實現了fun2繼承fun1

• 通過class 來繼承:class可以通過extends關鍵字來實現繼承。

Http協議與TCP區別：

• TCP協議對應于傳輸層，兒HTTP協議對應于應用層，從本質上來說，而這沒有可比性。Http協議是建立在TCP協議基礎之上的，當瀏覽器需要從服務器獲取網頁數據的時候，會發出一次HTTP請求。http請求會通過TCP建立起一個到服務器的連接通道，當本次請求需要的數據完畢后，Http會立即將TCP連接斷開，這過程非常短暫。所以HTTP連接是一種短連接，是一種無狀態的連接。所謂的無狀態，是指瀏覽器每次向服務器發起請求的時候，不是通過同一個連接，而是每次都建立一個新的連接。每次請求結束后，連接關閉，相關內容就釋放了，所以記不住任何狀態，成為了無狀態連接。

• keep-Alive

  • 出現原因：如今的網頁變的復雜了，里面可能會有很多的圖片，每次訪問圖片都需要建立一個tcp連接就顯得極其低效。

• 作用：從HTTP/1.1起，默認開啟了Keep-Alive,保持連接的特性（當一個網頁打開完成后，客戶端與服務端用于傳輸HTTP數據的TCP連接不會立即關閉，會保持一段時間，可以在服務器軟件中設定這個時間。引為這個時間范圍是有限的，所以仍然將HTTP協議看做是無狀態的。所以出現了Session、Cookie等相關技術，來保持用戶的一些狀態。）

• http是無狀態的短連接，TCP是有狀態的長連接，雖然http是建立在TCP的基礎上的，但HTTP每次請求完成就把TCP連接關了，所以是短連接。而我們通過Socket編程使用TCP協議的時候，因為我們自己可以通過代碼去控制什么時候打開連接，什么時候關閉連接，只要我們不通過代碼把連接關閉，這個連接就會在客戶端可服務端的進程中一只存在，相關狀態數據會一直保存著。

• TCP/IP

js中檢測對象中是否存在某個屬性。

• in 關鍵字：

var o={x:1}; 
"x" in o; //true，自有屬性存在 
"y" in o; //false 
"toString" in o; //true，是一個繼承屬性 

• hasOwnProperty():
  該方法只能判斷自有屬性是否存在，對于繼承的屬性（原型propto中的屬性）會返回false。

vue中路由傳參$prams和query的區別：

params：/router1/:id ，/router1/123，/router1/789 ,這里的id叫做params
query：/router1?id=123 ,/router1?id=456 ,這里的id叫做query。

路由設置這里，當你使用params方法傳參的時候，要在路由后面加參數名，并且傳參的時候，參數名要跟路由后面設置的參數名對應。使用query方法，就沒有這種限制，直接在跳轉里面用就可以。
eg：如下兩種寫法使用this.$route中params屬性和query的區別：
1：params方式傳參
路由配置：

image.png

地址欄：

image.png

打印this.$route:

image.png

2：query方式傳參

路由配置：

image.png

地址欄：

image.png

打印this.$route:

image.png

Vue與Angular的比較，Vue的單向數據流注意點

字符串的一些方法：

• replace

  • 語法：stringObject.replace(regexp/substr,replacement)

• 參數：

  • regexp/substr：規定字符串或要替換的RegExp對象。

• replacement : 規定了替換文本或者生成替換文本的函數

• 當replacement為函數時：函數有兩個參數一個是為匹配到的字符串，第二個為字符串的索引（將匹配到的字符串看成是一個整體）

let a = 'adfjdjfsdjf{04}sdjfasdflsdj{143}'.replace(/\{[0-9]*\}/g, function (a, b) {
  console.log(a, '----', b);
  return '---'
})

打印結果為：
{04} ---- 11
{143} ---- 27