1.vue.js @click和v-on:click有什么區(qū)別？

沒有區(qū)別，@ 只是一個(gè) v-on: 的縮寫，為了書寫方便。

Vue.js 為 v-bind 和 v-on 這兩個(gè)最常用的指令，提供了特定簡(jiǎn)寫：
v-bind 縮寫
<!-- 完整語法 -->
<a v-bind:href="url" rel="external nofollow"  rel="external nofollow" ></a>
<!-- 縮寫 -->
<a :href="url" rel="external nofollow"  rel="external nofollow" ></a>
v-on 縮寫
<!-- 完整語法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>
 

2.v-on和v-bind的區(qū)別

v-bind指令用于設(shè)置HTML屬性：v-bind:href  縮寫為 :href

<a :href="{undefined{url}}" rel="external nofollow" >aa</a>

v-on 指令用于綁定HTML事件 ：v-on:click 縮寫為 @click

<a @click="get()">aa</a>

3.v-if和v-show對(duì)比：

• v-if當(dāng)條件為false的時(shí)候，壓根不會(huì)有對(duì)應(yīng)的元素在DOm中。
• v-show當(dāng)條件為false時(shí)，僅僅是將元素的dispaly屬性設(shè)置為none而已。

開發(fā)中如何選擇呢：

• 當(dāng)需要再顯示與隱藏之間切片很頻繁的時(shí)，使用v-show
• 當(dāng)只有一次切換時(shí)，使用v-if 

4.關(guān)于<template>

 請(qǐng)教了下別人，聽完解釋，有個(gè)基本概念，但是對(duì)于應(yīng)用實(shí)踐，他告訴template是用來寫界面的，也沒毛病，繼續(xù)懵逼著，還是自己摸索下。

template 標(biāo)簽在Vue實(shí)例綁定的元素內(nèi)部是可以顯示template標(biāo)簽中的內(nèi)容，但是查看后臺(tái)的dom結(jié)構(gòu)不存在template標(biāo)簽。

如果template標(biāo)簽不放在vue實(shí)例綁定的元素內(nèi)部默認(rèn)里面的內(nèi)容不能顯示在頁面上，但是查看后臺(tái)dom結(jié)構(gòu)存在template標(biāo)簽。

<div id="app">
    <!--此處的template標(biāo)簽中的內(nèi)容顯示并且在dom中不存在template標(biāo)簽-->
    <template>
        <div>我是template</div>
        <div>我是template</div>
    </template>
</div>
<!--此處的template標(biāo)簽中的內(nèi)容在頁面中不顯示，但是在dom結(jié)構(gòu)存在該標(biāo)簽及內(nèi)部結(jié)構(gòu)-->
<!--因?yàn)閠emplate標(biāo)簽天生不可見，它設(shè)置了display:none;屬性-->
<template id="tem">
    <div id="div1">我是template</div>
    <div>我是template</div>
</template>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
    });
</script>

vue實(shí)例綁定的元素內(nèi)部的template標(biāo)簽不支持v-show指令，即v-show="false"對(duì)template標(biāo)簽來說不起作用。但是此時(shí)的template標(biāo)簽支持v-if、v-else-if、v-else、v-for這些指令

<div id="app">
    <template v-if="true">
    <!--此時(shí)template標(biāo)簽中的內(nèi)容顯示在頁面上，但是看dom結(jié)構(gòu)沒有template標(biāo)簽-->
        <div>我是template</div>
        <div>我是template</div>
    </template>
    <div v-if="true">
    <!--此時(shí)頁面上顯示div標(biāo)簽中的內(nèi)容，并且看dom結(jié)構(gòu)存在最外面的div標(biāo)簽-->
        <div>我是template</div>
        <div>我是template</div>
    </div>
    <!--此處會(huì)輸出6個(gè)‘我是template'并且dom結(jié)構(gòu)中不存在template標(biāo)簽-->
    <template v-for="a in 3">
        <div>我是template</div>
        <div>我是template</div>
    </template>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
    });
</script>

vue實(shí)例中的template屬性

將實(shí)例中template屬性值進(jìn)行編譯，并將編譯后的dom替換掉vue實(shí)例綁定的元素，如果該vue實(shí)例綁定的元素中存在內(nèi)容，這些內(nèi)容會(huì)直接被覆蓋。

• 1）如果vue實(shí)例中有template屬性，會(huì)將該屬性值進(jìn)行編譯，將編譯后的虛擬dom直接替換掉vue實(shí)例綁定的元素（即el綁定的那個(gè)元素）；
• 2）template屬性中的dom結(jié)構(gòu)只能有一個(gè)根元素，如果有多個(gè)根元素需要使用v-if、v-else、v-else-if設(shè)置成只顯示其中一個(gè)根元素；
• 3）在該屬性對(duì)應(yīng)的屬性值中可以使用vue實(shí)例data、methods中定義的數(shù)據(jù)。

<!--此處頁面顯示hello-->
<div id="app"></div>
<!--此處template標(biāo)簽必須在vue綁定的元素外面定義，并且在頁面中不顯示下面的template標(biāo)簽中的內(nèi)容-->
<template id="first">
    <div v-if="flag">{{msg}}<div>
    <div v-else>111<div>
</template>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el:"#app",
        data:{
            msg:"hello",
            flag:true
        },
        template:"#first"http://通過該屬性可以將自定義的template屬性中的內(nèi)容全部替換app的內(nèi)容，并且會(huì)覆蓋里面原有的內(nèi)容，并且在查看dom結(jié)構(gòu)時(shí)沒有template標(biāo)簽
    });
</script>

上面的例子中html中的template標(biāo)簽可以變成自定的標(biāo)簽，如下。但是下面這種方式也可以將<abc></abc>標(biāo)簽中的內(nèi)容替換掉app元素，但是<abc></abc>標(biāo)簽中的內(nèi)容也會(huì)顯示在頁面上。所以此處利用template標(biāo)簽來定義vue實(shí)例中需要設(shè)置的template屬性。

<abc id="first">
    <div v-if="flag">{{msg}}<div>
    <div v-else>111<div>
</abc>

5. 認(rèn)識(shí)Vue 的 export、export default、import

在ES6中，export與export default均可用于導(dǎo)出變量(含常量)、函數(shù)、類、文件、模塊等，然后在其它文件或模塊中通過import 變量(含常量)|函數(shù)|類|文件|模塊名的方式，將其導(dǎo)入，以便能夠?qū)ζ溥M(jìn)行使用。

一個(gè)模塊就是一個(gè)獨(dú)立的文件，該文件內(nèi)部的內(nèi)容，外部無法獲取。如果希望外部能夠讀取模塊內(nèi)部的內(nèi)容，比如某個(gè)變量，就必須使用export關(guān)鍵字導(dǎo)出該變量，然后在其它模塊中通過import方式導(dǎo)入使用。

//model1.js
export var author = "shouke"
export var addr = "sz"
// 等價(jià)寫法
var author = "shouke"
var addr = "sz"
export { author, addr }

//model2.js
import { author } from "./model1"
import { addr } from "./model1"

一個(gè)js文件是可以有多個(gè) export

但是一個(gè)js文件中只能有一個(gè)export default

6.let const var的區(qū)別

 var是ES5提出的，let和const是ES6提出的

ES5中作用域有：全局作用域、函數(shù)作用域。沒有塊作用域的概念。
ES6(簡(jiǎn)稱ES6)中新增了塊級(jí)作用域。塊作用域由 { } 包括，if語句和for語句里面的{ }也屬于塊作用域。

• const聲明的是常量，必須賦值
• 1）一旦聲明必須賦值,不能使用null占位。
• 2）聲明后不能再修改
• 3）如果聲明的是復(fù)合類型數(shù)據(jù)，可以修改其屬性
• let和var聲明的是變量，聲明之后可以更改，聲明時(shí)可以不賦值
• var允許重復(fù)聲明變量，后一個(gè)變量會(huì)覆蓋前一個(gè)變量。let和const在同一作用域不允許重復(fù)聲明變量，會(huì)報(bào)錯(cuò)。
• var聲明的變量存在變量提升（將變量提升到當(dāng)前作用域的頂部）。即變量可以在聲明之前調(diào)用，值為undefined。
• let和const不存在變量提升。即它們所聲明的變量一定要在聲明后使用，否則報(bào)ReferenceError錯(cuò)。
• var不存在塊級(jí)作用域，不能跨函數(shù)訪問。
• let和const存在塊級(jí)作用域，不能跨塊訪問，也不能跨函數(shù)訪問。

7.Options API vs Composition API

 字面上, 選項(xiàng) API 與 組合 API，細(xì)品, 這反映了設(shè)計(jì)面向的改變：
 1. 選項(xiàng)，誰的選項(xiàng)，關(guān)鍵在“誰”。誰？組件。也是 Vue2.x 的設(shè)計(jì)基礎(chǔ)。組件有什么，
     有狀態(tài)，有改變狀態(tài)的方法，有生命周期，還有組件和組件之間的關(guān)系。這種情況
     下，“數(shù)據(jù)”要接受一定的“規(guī)矩”，“什么時(shí)候能做什么事”，“什么時(shí)候有什么表現(xiàn)”；
      這個(gè)狀態(tài)下，開發(fā)模式像是“被動(dòng)接受”。

  2. 組合，什么組合，關(guān)鍵在“什么”。什么？數(shù)據(jù)。數(shù)據(jù)的組合。Vue3.x 設(shè)計(jì)重點(diǎn)變了，數(shù)
       據(jù)變絕對(duì)的C了，現(xiàn)在去組件里串門，不用“守規(guī)矩”了，只需要說“我在 onMounted 的時(shí)
        候要這樣這樣，你看著辦”，真只能的以“數(shù)據(jù)”為中心，沒人能管得了了，想去哪就去哪，
        自然就靈活了

8.VUE3中watch和watchEffect的用法

 watch和watchEffect都是監(jiān)聽器，但在寫法和使用上有所區(qū)別。

• watch可監(jiān)聽老舊值
• watchEffect監(jiān)聽新值
• watchEffect局限性，只能監(jiān)聽最新的變化，中間值不監(jiān)聽到

watch和watchEffect監(jiān)聽器在同一個(gè)頁面中都可以使用多次，對(duì)于分別監(jiān)聽多個(gè)變量的時(shí)候

1）watchEffect ：

• 立即執(zhí)行，沒有惰性。
• 不需要手動(dòng)傳入依賴
• 每次初始化時(shí)會(huì)執(zhí)行一次回調(diào)函數(shù)來自動(dòng)獲取依賴
• 無法獲取到原值，只能得到變化后的值

watchEffect(()=>{
      console.log(name.value)
 })
 function change(){
      name.value = 'blue'
      // age.value=1
      // console.log(111)
}

 2）watch

• 具備一定的惰性。
• 參數(shù)可以拿到最新值和之前的值。
• 可以偵聽多個(gè)數(shù)據(jù)的變化，用一個(gè)偵聽器承載。
• 給 watch 第三個(gè)參數(shù) 添加 { immediate:true } 可以立即執(zhí)行，沒有惰性。

function changeDB(){
      // obj.age = 22
      // obj.xz.price = '22k'
      obj.name='redred'
  }
    // 監(jiān)視r(shí)eactive定義數(shù)據(jù)的某一個(gè)屬性
    watch(()=> obj.name,(newVal,oldVal)=>{
      console.log("有新名字拉~~",newVal)
      console.log("原來的名字哦~",oldVal)
    })

9.VUE3中ref和reactive的區(qū)別

reactive 和 ref 都是用來定義響應(yīng)式數(shù)據(jù)的 。reactive更推薦去定義復(fù)雜的數(shù)據(jù)類型 ref 更推薦定義基本類型。

如果在template里使用的是ref類型的數(shù)據(jù), 那么Vue會(huì)自動(dòng)幫我們添加.value

如果在template里使用的是reactive類型的數(shù)據(jù), 那么Vue不會(huì)自動(dòng)幫我們添加.value

Vue在解析數(shù)據(jù)之前, 會(huì)自動(dòng)判斷這個(gè)數(shù)據(jù)是否是ref類型的, 如果是就自動(dòng)添加.value, 如果不是就不自動(dòng)添加.value

10.defineProps、defineEmits、defineExpose  

defineProps獲取組件傳值

<template>
  <h1>{{ msg }}</h1>
  <div @click="clickThis">1111</div>
</template>
<script setup lang="ts">
  defineProps<{ // 采用ts專有聲明，無默認(rèn)值
    msg: string,
    num?: number
  }>()
     // 采用ts專有聲明，有默認(rèn)值
    interface Props {
        msg?: string
        labels?: string[]
    }
    const props = withDefaults(defineProps<Props>(), {
        msg: 'hello',
        labels: () => ['one', 'two']
    })
  defineProps({ // 非ts專有聲明
    msg: String,
    num: {
      type:Number,
      default: ''
    }
  })
</script>
<style scoped lang="less">
</style>

defineEmits子組件向父組件事件傳遞

vue3.0中  在子組件中觸發(fā)父組件中的函數(shù)的技巧目前有兩個(gè)：defineEmits和useContext ，現(xiàn)在useContext 已經(jīng)棄用。下面是defineEmits的示例：

defineExpose組件暴露自己的屬性

<template>
  <div>子組件helloword.vue</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const count = ref(123456)
defineExpose({
  count
})
</script>
<style scoped lang="less">
</style>

<template>
  <div @click="helloClick">父組件</div>
  <helloword ref="hello"></helloword>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import helloword from './components/HelloWorld.vue'
const hello = ref(null)
const helloClick = () => {
  console.log(hello.value.count) // 123456
}
</script>
<style lang="less" scoped>
</style>

到此這篇關(guān)于VUE常見知識(shí)疑點(diǎn)問題總結(jié)的文章就介紹到這了,更多相關(guān)VUE常見知識(shí)疑點(diǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論