[[394914]]

組件v-model支持參數

在Vue2.x時，我們要想給子組件傳值，還得單獨傳入。Vue3.x直接以v-model:xxx形式傳入參數，并且配合修飾符.sync進行數據同步更新。

App.vue

<template> 
  {{title}}  
  <Input v-model:title="title" /> 
</template> 
<script> 
import Input from "./components/Input" 
export default { 
  name: 'App', 
  components: { 
    Input 
  }, 
  data() { 
    return { 
      title: "蛙人", 
    } 
  }, 
} 
</script> 

Input.vue

<template> 
  <div class="Input"> 
      <input type="text" @input="first" :value="title"> 
  </div> 
</template> 
<script> 
export default { 
 name: 'Input', 
  props: { 
    title: { 
        default: () => "蛙人" 
    } 
  }, 
  methods: { 
      first(e) { 
          this.$emit("update:title", e.target.value) 
      }, 
  }, 
} 
</script> 

效果

組件支持多個v-model

在Vue3.x中支持在單個組件上可以創建多個v-model綁定。

App.vue

<template> 
  {{title}} 
  {{name}} 
 
  <Input v-model:title="title" v-model:name="name"/> 
</template> 
 
<script> 
import Input from "./components/Input" 
export default { 
  name: 'App', 
  components: { 
    Input, 
  }, 
  data() { 
    return { 
      title: "蛙人", 
      name: "www" 
    } 
  }, 
} 
</script> 

Input.vue

<template> 
  <div class="Input"> 
      <input type="text" @input="first" :value="title"> 
      <input type="text" @input="last" :value="name"> 
  </div> 
</template> 
<script> 
export default { 
 name: 'Input', 
  props: { 
    title: { 
        default: () => "蛙人" 
    }, 
    name: { 
        default: () => "前端娛樂圈" 
    } 
  }, 
  methods: { 
      first(e) { 
          this.$emit("update:title", e.target.value) 
      }, 
      last(e) { 
          this.$emit("update:name", e.target.value) 
      } 
  } 
} 
</script> 

效果

 

Setupsetup

函數是一個新的組件選項。作為在組件內使用Composition Api的入口點。下面我們分為4個方面來講解它

• 調用時機
• this指向
• 函數參數
• 返回值

調用時機

創建組件實例，然后初始化props，緊接著就調用setup函數。從生命周期的角度來看，它會在beforeCreate之前執行。也就是創建組件先執行setup、beforeCreate、create。

<template> 
  <div>蛙人</div> 
</template> 
<script> 
export default { 
  name: 'App', 
  setup() { 
    console.log("hey 蛙人") 
  } 
} 
</script> 

this指向

由于不能在setup函數中使用data、methods，為了避免使用Vue出錯，所以把setup函數中this修改為了undefined。

<template> 
  <div>蛙人</div> 
</template> 
<script> 
export default { 
  name: 'App', 
  setup() { 
    console.log(this); // undefined 
  } 
} 
</script> 

函數參數props

• context
• props

接收組件傳遞過來的所有數據，并且都是響應式的。

<template> 
  <div>蛙人</div> 
</template> 
<script> 
export default { 
  name: 'App', 
  props: { 
      title: { 
          type: String 
      } 
  }, 
  setup(props) { 
    console.log(props.title) 
  } 
} 
</script> 

注意一點，props數據不能使用解構，否則響應式數據失效

<template> 
  <div>蛙人</div> 
</template> 
<script> 
export default { 
  name: 'App', 
  props: { 
      title: { 
          type: String 
      } 
  }, 
  setup({ title }) { 
    console.log(title) // 這里響應式數據將失效 
  } 
} 
</script> 

context

該參數提供一個上下文對象，從原來的2.x中選擇性的暴露了一些屬性。

• attrs
• slots
• emit

<template> 
  <div>蛙人</div> 
</template> 
<script> 
export default { 
  name: 'App', 
  props: { 
      title: { 
          type: String 
      } 
  }, 
  setup(props, { attrs, slots, emit } ) { 
    console.log(attrs)  
  } 
} 
</script> 

上面，attrs和slots都是內部組件實例上對應項的代理，可以確保在更新后仍然還是最新的值。所以這里可以使用解構語法。

返回值

可以將setup函數返回值渲染到頁面上。但前提是，setup返回值必須是一個對象，否則返回其它值則渲染無效。

<template> 
  <div>蛙人</div> 
</template> 
<script> 
export default { 
  name: 'App', 
  props: { 
      title: { 
          type: String 
      } 
  }, 
  setup() { 
    const name = "蛙人" 
    return { 
       name 
    } 
  } 
} 
</script> 

Reactive

該方法接收一個參數{}創建一個響應式對象。跟Vue2.x的Vue.observable一樣。如果該參數不是對象的話，也可以渲染到模板上，但不是響應式的數據。

<template> 
  <div class="test"> 
    姓名:  {{ name.value }} 
    {{ test() }} 
  </div> 
</template> 
 
<script> 
import { reactive } from "vue" 
export default { 
 name: 'test', 
  data() { 
    return { 
 
    } 
  }, 
  setup() { 
    let name = reactive({value: "蛙人"}) 
    function test() { 
        name.value = "abc"; // 該方法測試響應式數據，可以看到執行完該方法視圖也會發生改變 
    } 
    return { 
        name, 
        test 
    } 
  } 
} 
</script> 

Ref

該方法接收一個參數，可以是單個值，也可以是一個對象，并且都是響應式的數據。當傳入一個對象時{}，內部將調用reactive方法進行轉換為響應式數據。返回值里面帶有.value屬性取值，當使用模板渲染的時候可省去.value。

<template> 
  <div class="test"> 
    姓名:  {{ name }} 
    {{ test() }} 
  </div> 
</template> 
 
<script> 
import { ref } from "vue" 
export default { 
 name: 'test', 
  data() { 
    return { 
 
    } 
  }, 
  setup() { 
 
    let name = ref("蛙人") 
    function test() { 
        name.value = "abc"; // 只是渲染模板可以省略.value，但是在邏輯中還得寫哦 
    } 
    return { 
        name, 
        test 
    } 
  } 
} 
</script> 

Computed

該方法可以傳入一個函數，默認該函數就是getter，不管getter返回值為一個ref響應式數據還是一個普通變量，數據都是只讀不能改變。

<script> 
import { ref, computed } from "vue" 
export default { 
 name: 'test', 
 setup() { 
    let name = ref("蛙人") 
    let test = computed(() => name.value); 
    test.value = "123" // 修改無效，只能只讀 
  } 
} 
</script> 

傳入一個對象set和get函數方法，這樣就可以修改啦

<script> 
import { ref, computed } from "vue" 
export default { 
 name: 'test', 
 setup() { 
    let name = ref("蛙人") 
    let test = computed({ 
        get() { 
            return name.value; 
        }, 
        set(val) { 
            return name.value = val; 
        } 
    }); 
    test.value = "123"  
  } 
} 
</script> 

Readonly

該方法接收傳入一個對象，默認是只讀功能，是深層對象只讀，不管嵌套多少層的屬性都是只讀狀態。

<script> 
import { readonly } from "vue" 
export default { 
 name: 'test', 
  setup() { 
    let obj = { 
        name: "蛙人", 
        sex: "male", 
        prodution: { 
            proName: "音響" 
        } 
    } 
    let only = readonly(obj) 
    only.name = "前端娛樂圈" // 修改無效 
    only.prodution.proName = "歡迎關注" // 修改無效 
    console.log(only)  
  } 
} 
</script> 

WatchEffect

該方法接收一個函數并且立即執行，并當該函數里的變量變更時，重新執行該函數。該方法無法獲取到原值，只能是改變之后的值。

如果要監聽哪個值，需要在該函數里寫出來，否則監聽無效

import { ref, watchEffect } from "vue" 
export default { 
 name: 'test', 
  setup() { 
    let name = ref("蛙人"); 
    let age = ref(23); 
    watchEffect(() => { 
        name.value; // 監聽name 
        age.value;  // 監聽age 
         
        console.log(name.value) 
        console.log(age.value) 
    }) 
     
    setTimeout(() => { 
        name.value = "前端娛樂圈" 
    }, 5000) 
 
    setTimeout(() => { 
        age.value = 18 
    }, 1000) 
  } 
} 
</script> 

取消監聽

有時候我們想在觸發一定的條件后取消監聽。這時可以執行watchEffect的返回值。

import { ref, watchEffect } from "vue" 
export default { 
 name: 'test', 
  setup() { 
    let name = ref("蛙人"); 
    let age = ref(23); 
    let stop = watchEffect(() => { 
        name.value; // 監聽name 
        age.value;  // 監聽age 
         
        console.log(name.value) 
        console.log(age.value) 
    }) 
     
    setTimeout(() => { 
        name.value = "前端娛樂圈" 
    }, 5000) 
 
    setTimeout(() => { 
        age.value = 18; 
        setTimeout(stop, 300) 
    }, 1000) 
  } 
} 
</script> 

Watch

watch等同于Vue2.x中的this.$watch，watch需要監聽特定數據，默認情況是懶執行，也就是只有當數據發生變化時才執行第二個參數函數。

對比WatchEffect ，Watch允許我們

• 懶執行函數
• 更明確哪些狀態改變觸發監聽器
• 可以監聽獲取到變化前后的值

監聽單個值

<script> 
import { ref, watch } from "vue" 
export default { 
 name: 'test', 
  setup() { 
    let name = ref("蛙人"); 
 
    watch(name, (newVal, oldVal) => { 
        console.log(newVal, oldVal) // 前端娛樂圈， 蛙人 
    }) 
 
    setTimeout(() => { 
        name.value = "前端娛樂圈" 
    }, 1000) 
 
  } 
} 
</script> 

監聽多個值

監聽多個值，返回的是一個數組對象。

<script> 
import { ref, watch } from "vue" 
export default { 
 name: 'test', 
  setup() { 
    let name = ref("蛙人"); 
    let age = ref(23); 
 
    watch([name, age], (newVal, oldVal) => { 
        console.log(newVal, oldVal) // ["前端娛樂圈", 18], ["蛙人", 23] 
    }) 
     
    setTimeout(() => { 
        name.value = "前端娛樂圈" 
        age.value = 18 
    }, 1000) 
 
  } 
} 
</script> 

生命周期系列

在Vue3.X也可以在setup函數下使用生命周期，這些鉤子函數寫法跟之前的生命周期寫法不同。

• 注意：這些生命周期寫法只能在setup函數下使用，在其它地方使用則會報錯。

與Vue2.x版本生命周期相對應的組合式Api

• beforeCreate --> setup
• created --> setup
• beforeMount --> onBeforeMount
• mounted --> onMounted
• beforeUpdate --> onBeforeUpdate
• updated --> onUpdated
• beforeDestroy --> onBeforeUnmount
• destroyed --> onUnmount

下面我們來看一下這些鉤子的寫法。鉤子函數里面是一個回調函數。

<script> 
import { onMounted, onUpdated, onUnmounted } from "vue" 
export default { 
 name: 'test', 
  setup() { 
     
    onMounted(() => { 
      console.log('mounted!') 
    }) 
    onUpdated(() => { 
      console.log('updated!') 
    }) 
    onUnmounted(() => { 
      console.log('unmounted!') 
    }) 
     
  } 
} 
</script> 

Provide && Inject

該方法和Vue2.x的 provide、inject一樣的。但是Vue3新特性這倆方法只能在setup中使用。

• Provide：接收2個參數，第一個key值，第二個value值，進行傳遞
• Inject：接收2個參數，第一個是provide的key值，默認第二個參數可選，可以設置默認值(當找不到key值，設置一個默認值)

App.vue

<script> 
import test from "./components/test" 
import { provide, ref } from "vue" 
export default { 
  name: 'App', 
  components: { 
    test 
  }, 
  setup() { 
    let name = ref("蛙人") 
    provide("name", name) // 傳入一個響應式數據 
  }, 
} 
</script> 

test.vue

<template> 
 {{ NAME }}     
</template> 
<script> 
import { inject } from "vue" 
export default { 
 name: 'test', 
  setup() { 
    let NAME = inject("name") 
    console.log(NAME) // 蛙人 
       
    let title = inject("key", 123) 
    console.log(title) // 這時就會觸發默認值，因為這里找不到這個key值 
       
    return { 
        NAME 
    } 
  } 
} 
</script> 

Refs

該方法相當于Vue2.x的refs一樣獲取元素，那么在setup中配合使用ref對象進行獲取

<template> 
  <div class="test"> 
    <p ref="el">123</p> 
  </div> 
</template> 
 
<script> 
import { ref, onMounted } from "vue" 
export default { 
 name: 'test', 
  setup() { 
    let el = ref(null) 
    onMounted(() => { 
         console.log(el) // p標簽元素 
    }) 
    return { 
        el 
    } 
     
  } 
} 
</script> 

isReadonly

用于檢測該數據是不是可讀數據。返回一個Boolean類型。

<script> 
import { isReadonly, readonly} from "vue" 
export default { 
 name: 'test', 
  setup() { 
    let test = readonly({name: "蛙人"}) 
    console.log(isReadonly(test)) // true 
       
    let test2 = readonly("蛙人") 
    console.log(isReadonly(test2)) // false， 這不是一個只讀數據 
  } 
} 
</script> 

isRef

用于檢測該數據是不是ref響應式數據。返回一個Boolean類型。

<script> 
import { isRef, ref } from "vue" 
export default { 
 name: 'test', 
  setup() { 
    let test = ref("公眾號：前端娛樂圈") 
    console.log(isRef(test)) // true 
  } 
} 
</script> 

isReactive

用于檢測該數據是不是reacttive響應式數據。返回一個Boolean類型。

<script> 
import { isReactive, reactive } from "vue" 
export default { 
 name: 'test', 
  setup() { 
    let test = reactive({name: "蛙人"}) 
    console.log(isReactive(test)) // true 
       
    let test2 = reactive("蛙人") 
    console.log(isReactive(test2)) // false, 這不是一個響應式數據 
  } 
} 
</script> 

移除過濾器filters

在Vue3.x中移除過濾器，不在支持。建議使用computed去替代。貼一個官網例子

<template> 
  <h1>Bank Account Balance</h1> 
  <p>{{ accountInUSD }}</p> 
</template> 
 
<script> 
  export default { 
    props: { 
      accountBalance: { 
        type: Number, 
        required: true 
      } 
    }, 
    computed: { 
      accountInUSD() { 
        return '$' + this.accountBalance 
      } 
    } 
  } 
</script> 

不再限制Template一個根節點

Vue3.x中將不在限制模板中只有一個根節點，根組件可以任意多個元素。

<template> 
    <div>首頁</div> 
    <div>新聞</div> 
</template> 

自定義v-model修飾符

Vue3.x中，添加了可以自定義修飾符，如Api提供的內置方法.trim，新特性我們也可以自定義啦。下面就來演示一下寫一個轉換字符串大寫的修飾符。

App.vue

<template> 
  <Input v-model:str.capitalize="modelModifiers"/> 
</template> 
<script> 
import Input from "./components/Input" 
export default { 
  name: 'App', 
  components: { 
    Input 
  } 
} 
</script> 

Input.vue

<template> 
  <div class="Input"> 
    <input type="text" @input="send"> 
  </div> 
</template> 
 
<script> 
export default { 
 name: 'Input', 
  props: { 
      str: String, 
      strModifiers: { 
          default: () => ({}) 
      } 
  }, 
  methods: { 
      send(e) { 
          let value = e.target.value 
          if (this.strModifiers.capitalize) { // capitalize 這里的值就是修飾符 
            value = value.toUpperCase() 
            console.log(value) 
          } 
          this.$emit("update:str", value) 
      } 
  } 
} 
</script> 

上面方法，必須傳入props值，Modifiers必須寫定義為一個空對象。

• 特別需要注意一點：如果你的v-model參數值為str，那么組件里面接收的值，全部為str開頭，如：props里面的 strModifiers，str

效果：

 

廢棄on，off，once實例方法

Vue3.x中 $on，$off 和 $once 實例方法已被移除，應用實例不再實現事件觸發接口。

<script> 
 created() { 
        console.log(this.$on, this.$once, this.$off) // undefined undefined undefined 
 } 
</script> 

自定義指令更改

在Vue3.x中自定義指定寫法稍有更改，看下列。

• bind --> beforeMount 指令綁定到元素后發生。只發生一次
• inserted --> mounted 元素插入到父DOM后發生
• beforeUpdate: Vue3.x新添加的，這是在元素更新之前調用，
• componentUpdated --> updated
• beforeUnmount : Vue3.x新添加的，將在卸載元素前調用
• unbind --> unmounted

main.js

import { createApp } from 'vue' 
import App from './App.vue' 
 
let main = createApp(App) 
main.directive("custom", { 
    beforeMount(el, attr) { 
        console.log(el, attr) 
    }, 
    updated() { 
        console.log("updated") 
    }, 
    unmounted() { 
        console.log("移除") 
    } 
}) 
main.mount('#app') 

App.vue

<template> 
  <p v-custom v-if="show"></p> 
</template> 
<script> 
export default { 
  name: 'App', 
  data() { 
    return { 
      show: true 
    } 
  }, 
  created() { 
    setTimeout(() => { 
      this.show = true; 
    }, 5000) 
       
    setTimeout(() => { 
      this.show = false 
    }, 3000) 
  } 
} 
</script> 

感謝謝謝你讀完本篇文章，希望對你能有所幫助.