Vue中的options選項(xiàng)怎么用

發(fā)布時(shí)間：2022-03-22 13:34:46 來(lái)源：億速云閱讀：279 作者：iii 欄目：開發(fā)技術(shù)

這篇文章主要介紹了Vue中的options選項(xiàng)怎么用的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇Vue中的options選項(xiàng)怎么用文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

Vue中的options選項(xiàng)

options的五類屬性

數(shù)據(jù)： data，props，propsdata，computed，methods，watch
DON: el，template，render，rebderError
生命周期鉤子函數(shù)：beforeCreate，created，beforeMount，mounted，beforeUpdate，updated，activated，deactivated，beforeDestroy，destroyed，erroCaptured。
資源：directives，filters，components
組合：parent，mxins，extends，provide，inject

入門屬性

el（掛在點(diǎn)）

new Vue({
    el："#app"
    template:`<div>我是小明</div>`
})
可以使用$mount代替
new Vue({
    template:`<div>我是小明</div>`
}).$mount("#app")

data（內(nèi)部數(shù)據(jù)）支持對(duì)象和函數(shù)，優(yōu)先使用函數(shù)

會(huì)被Vue監(jiān)聽
會(huì)被Vue實(shí)例代理
每次data的讀寫都會(huì)被Vue監(jiān)聽
Vue會(huì)在data變化是更新UI

對(duì)象
new Vue({
    template:"<div>{{n}}</div>",
    data:{
        n:0
    }
}).$mount('#app')
函數(shù)
vue非完整版只支持函數(shù)
new Vue({
    template:"<div>{{n}}</div>",
    data(){
        return {
            m:5
        }
    }
})$mount('#app')

methods（方法）事件處理函數(shù)或者普通函數(shù)

new Vue({
    template:"<div>{{n}}{{ add()}} <button @click="add">按鈕</button></div>",
    data:{
        n:0
    },
    methods:{
        add(){
    	console.log('我可以是事件處理函數(shù)也可以是普通函數(shù)')
}
        }
}).$mount('#app')

components（vue組件：注意大小寫）三種方式

注冊(cè)全局組件
Vue.component('Deon1', {
  template: "<h3>全局組件</h3>"
})
注冊(cè)局部組件
const deon2 = {
  template: "<h3>局部組件 {{n}}</h3>",
   //在組建中data必須使用函數(shù)
  data() {
    return {
      n: "小明"
    }
  }
}
new Vue({
  components: {
    Deon2: deon2,
    Deon3:{
      template:"<h3>組件3</h4>"
  }
  },
  template: `
    <div>頁(yè)面
    <Deon1></Deon1>
    <Deon2></Deon2>
 	<Deon3></Deon3>
    </div> 
  `
}).$mount('#app')

使用vue文件添加組件

deon4.vue文件

<template>
  <div>我是deon.vue文件{{ name }}</div>
</template>
<script>
export default {
  data() {
    name: "組件4";
  },
};
</script>
<style scoped>
div {
  border: 1px solid red;
}
</style>

main.js

import Deon4 from './deon4.vue'
Vue.component('Deon1', {
  template: "<h3>全局組件</h3>"
})
const deon2 = {
  template: "<h3>局部組件 {{n}}</h3>",
  //在組建中data必須使用函數(shù)
  data() {
    return {
      n: "小明"
    }
  }
}
new Vue({
  components: {
    Deon2: deon2,
    Deon3: {
      template: "<h3>組件3</h4>"
    },
    Deon4
  },
  template: `
    <div>頁(yè)面
    <Deon1></Deon1>
    <Deon2></Deon2>
    <Deon3></Deon3>
    <Deon4><Deon4>
    </div> 
  `
}).$mount('#app')

常用的四個(gè)生命周鉤子函數(shù)

created: 實(shí)例出現(xiàn)在內(nèi)存中
mounted:實(shí)例出現(xiàn)在頁(yè)面中觸發(fā)
updated:實(shí)例出現(xiàn)了變化觸發(fā)
destroyed:實(shí)例被銷毀了觸發(fā)

new Vue({
    template:"<div>{{n}}</div>",
    data:{
        n:0
    }，
     created() {
    console.log("實(shí)例出現(xiàn)在內(nèi)存中了觸發(fā)");
  },
  mounted() {
    console.log("實(shí)例出現(xiàn)在頁(yè)面中觸發(fā)");
  },
  updated() {
    console.log("實(shí)例出現(xiàn)了變化觸發(fā)");
  },
  destroyed() {
    console.log("實(shí)例被銷毀了觸發(fā)");
  }
}).$mount('#app')

props（外部數(shù)據(jù)）父組件想子組傳值

name="n"（傳入字符串）
:name="n"（傳入this.n數(shù)據(jù)）
:fn="add":（傳入this.add函數(shù)）

new Vue({
  components: {
    Deon1: {
      props: ["m"],
      template: "<div>{{m}}</div>"
    }
  },
  template: `<div><Deon1 :m="m"></Deon1></div>`,
  data: {
    m: 666
  }
}).$mount('#app')

computed（計(jì)算屬性）

不需要加括號(hào)
他會(huì)根據(jù)依賴是否變化來(lái)緩存（如果依賴沒(méi)有變化，就不會(huì)重新結(jié)算）
類型：{ [key: string]: Function | { get: Function, set: Function } }

用途

被計(jì)算出來(lái)的屬性就是計(jì)算數(shù)據(jù)
例子1 用戶名展示
例子2 列表展示

緩存

如果依賴的屬性沒(méi)有變，化就不會(huì)重新計(jì)算
getter/setter默認(rèn)不會(huì)做緩存，Vue做了特殊處理
如何緩存？看示例這是示例不是Vue的實(shí)現(xiàn)

示例：

var vm = new Vue({
  data: { a: 1 },
  computed: {
    // 僅讀取
    aDouble: function () {
      return this.a * 2
    },
    // 讀取和設(shè)置
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})
vm.aPlus   // => 2
vm.aPlus = 3
vm.a       // => 2
vm.aDouble // => 4

watch（監(jiān)聽）

data變化，就會(huì)執(zhí)行函數(shù)
options.watch用法
this.$watch用法
deep：偵聽的對(duì)象的 property 改變時(shí)被調(diào)用，不論其被嵌套多深
immediate：偵聽開始之后被立即調(diào)用
類型：{ [key: string]: string | Function | Object | Array }

用途

當(dāng)數(shù)據(jù)變化時(shí)，執(zhí)行一個(gè)函數(shù)
例子1撤銷
例子2 模擬computed 這樣很傻，一般不這樣做

何為變化

看示例

原本 let obj = {a:'a'} 現(xiàn)在 obj={a:'a'} 請(qǐng)問(wèn)
obj變了沒(méi)有. obj.a變了沒(méi)有
簡(jiǎn)單類型看至，復(fù)雜類型(對(duì)象)看地址
這其實(shí)就是 ===的規(guī)則

示例：

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // 方法名
    b: 'someMethod',
    // 該回調(diào)會(huì)在任何被偵聽的對(duì)象的 property 改變時(shí)被調(diào)用，不論其被嵌套多深
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true//監(jiān)聽是否深入
    },
    // 該回調(diào)將會(huì)在偵聽開始之后被立即調(diào)用
    d: {
      handler: 'someMethod',
      immediate: true
    },
    // 你可以傳入回調(diào)數(shù)組，它們會(huì)被逐一調(diào)用
    e: [
      'handle1',
      function handle2 (val, oldVal) { /* ... */ },
      {
        handler: function handle3 (val, oldVal) { /* ... */ },
        /* ... */
      }
    ],
    // watch vm.e.f's value: {g: 5}
    'e.f': function (val, oldVal) { /* ... */ }
  }
})
vm.a = 2 // => new: 2, old: 1

注意，不應(yīng)該使用箭頭函數(shù)來(lái)定義 watcher 函數(shù) (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭頭函數(shù)綁定了父級(jí)作用域的上下文，所以 this 將不會(huì)按照期望指向 Vue 實(shí)例，this.updateAutocomplete 將是 undefined

deep: true是干什么的？

如果object.a變了，請(qǐng)問(wèn)object算不算變
如果需要的答案是（也沒(méi)變啦），那么就用deep: true
如果需要的答案是（沒(méi)有變)，那么就用deep: false
deep的意思是監(jiān)聽 object的時(shí)候是否往深了看

computed和watch的區(qū)別

computed計(jì)算屬性

computed是計(jì)算屬性，也就是依賴某個(gè)值或者props通過(guò)計(jì)算得來(lái)得數(shù)據(jù)；
computed的值是在getter執(zhí)行之后進(jìn)行緩存的，只有在它依賴的數(shù)據(jù)發(fā)生變化，會(huì)重新調(diào)用getter來(lái)計(jì)算；
不支持異步，當(dāng)computed內(nèi)有異步操作時(shí)無(wú)效，無(wú)法監(jiān)聽數(shù)據(jù)的變化
調(diào)用時(shí)不需要加括號(hào)

watch 監(jiān)聽器

watch是監(jiān)聽器，可以監(jiān)聽某一個(gè)數(shù)據(jù)，然后執(zhí)行相應(yīng)的操作；
不支持緩存，數(shù)據(jù)變直接會(huì)觸發(fā)相應(yīng)的操作；
監(jiān)聽的函數(shù)接收兩個(gè)參數(shù)，第一個(gè)參數(shù)是最新的值；第二個(gè)參數(shù)是輸入之前的值；
支持異步操作；
deep選項(xiàng):偵聽的對(duì)象的 property 改變時(shí)被調(diào)用，不論其被嵌套多深
immediate:為true時(shí)偵聽開始之后被立即調(diào)用

關(guān)于“Vue中的options選項(xiàng)怎么用”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“Vue中的options選項(xiàng)怎么用”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)