vue的那些事...

vue

這是一篇包含vue2以及vue3的一些知識點，瀏覽一下吧...

computed

computed中的屬性是存在緩存中的，只有所依賴的參數改了，纔會重新計算一遍，不然不會計算。如果屬性不在computed裏修改，也不會做相應的更新

data() {
    return {
        originText: 1
    }
},
computed: {
    text() {
        return this.originText * 4
    }
},
created() {
    this.text = 777
}

//最終的text是4，而不是777

watch 監聽

watch的兩種寫法：

1. 直接寫函數
2. 一個對象，裏面包含handler函數

watch:{
    a(newValue,oldValue){//方法一
        
    },
    b:{
        handler(newValue,oldValue){
            
        },
        deep:true,//深度監聽
        immediate:true//立即監聽
    }
}

mixins

mixins包含的是一個對象數組。mixins裏也可以使用週期函數，當混入的組件也包含相同的生命週期函數時，mixins的週期函數先執行。

mixins.js
export const mixin={
    created(){
        console.log('mixins created')
    },
    mounted() {
        console.log('mixins mounted')
    },
}


組件：
import {
    mixin
} from '../mixins/mixins'
export default {
    mixins: [mixin],
    created() {
        console.log('正常的created')
    },
    mounted() {
        console.log('正常的mounted')
    }
}


結果爲:mixins created->正常的created->mixins mounted->正常的mounted

provide/inject

這一組是同時出現，provide是定義在父組件上，inject定義在自組件上去獲取父組件傳遞的值。

可以是對象也可以是函數，return的值是對象

//父組件
provide: {
    text: "vue2222"
},

//子組件
inject: ['text'],

component

component是內置的組件，可以通過is去指定渲染的是哪個組件

slot插槽

<slot> 元素作爲組件模板之中的內容分發插槽。<slot> 元素自身將被替換。

props

父組件傳參數給自組件時，子組件接收的參數

類型：Array/Object

Array:直接將父組件傳的參數寫入即可

object:參數如下

1.1 type：Number/Object/Boolean/Array/Date/Function/Symbol

表示傳入的參數類型

1.2 default 默認值 any

1.3 required 是否必須 Boolean

1.4 validator 檢查 Function

組件傳值，子組件傳值給父組件有2種方式

1. 子組件做了操作，觸發父組件的操作，但是並不需要自組件傳值給父組件

父組件：
<EmitEventChild @large='text=1' />
emits: ['large'],

子組件：此時的$emit不需要再傳第二個值了，只需傳一個參數，即事件名稱即可。

<template>
    <button @click="$emit('large')">放大</button>
</template>

2. 子組件確實需要傳值給父組件
   子組件：此時的$emit傳兩個參數，第一個是事件名稱，第二個是value。

setup

setup是新的組合api。

在beforeCreated之前就會被調用

setup有2個參數，props和context

props

setup中的props是響應式的，傳入的值變化了，也會隨之改變，也可以通過watch或者watchEffect去監聽。

Note:在setup時，不要解構props，會失去響應式

props是不可更改的。

context

context裏面包含了很多this的東西，但不包含props中定義的屬性

包含context.attrs/context.slots/context.emit(傳值可用，類似vue2中的this.$emit())。

reactive

reactive接收參數爲對象

const object =reactive({foo:'bar'})

ref

ref接收參數可以是值/對象

const count=ref(0)
console.log(count.value);//0
count.value++;
console.log(count.value);//1

在setup中使用ref的值時，需要用’.value’的方式去獲取相應的值

在template中，會自動解藕，所以不用’.value’的方式

computed默認返回一個不能修改的ref對象

const countPlus=computed(()=>count.value+1)
console.log(countPlus.value)
countPlus.value—;//報錯

watchEffect

傳入函數，會立即執行/響應，類似於vue的生命週期，類似react的useEffect

在setup中被調用時，會在組件卸載的時候，被自動清除。

router

vue3的路由需使用vue-router 4.x以上

package.json
"dependencies": {
    "vue": "^3.0.0-rc.1",
    "vue-router": "4.0.0-beta.3"
  },

使用方法如下

route.js

import {createWebHashHistory,createRouter} from 'vue-router'

const history=createWebHashHistory()

export const routes=createRouter({})

teleport

teleport可以手動將代碼塊插到某個標籤上

<teleport to="body">
  <child-component name="John" />
</teleport>

getCurrentInstance

獲取當前組件的實例，類似vue2.x中的this

import {getCurrentInstance} from 'vue'

setup(){
    const {ctx}=getCurrentInstance();
    ctx.$router//獲取路由
}

全局變量

globalProperties（全局變量）

main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

let app=createApp(App)

app.config.globalProperties.boo='21'


app.mount('#app')

v-for

v-for

支持object遍歷

<template>
<div v-for='(item,index) in object' :key="index">{{item}}</div>
</template>
<script>
export default {
    data() {
        return {
            object: {
                title: "123",
                content: "content",
                footer: "footer"
            }
        }
    }
}
</script>

Suspense新語法

用於向後臺獲取數據時，異步獲取過程中的頁面展示的情況，vue2.x是用v-if去判斷。

vue3.x可以使用suspense和default/fallback去處理，fallback爲獲取數據過程中展示的代碼，default爲有了數據做展示的代碼,代碼如下：

<template>
  <Suspense>
    <template #default>
      <div v-for="item in articleList" :key="item.id">
        <article>
          <h2>{{ item.title }}</h2>
          <p>{{ item.body }}</p>
        </article>
      </div>
    </template>
    <template #fallback>
      Articles loading...
    </template>
  </Suspense>
</template>
<script>
import axios from 'axios'
export default {
  async setup() {
    let articleList = await axios
      .get('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        console.log(response)
        return response.data
      })
    return {
      articleList
    }
  }
}
</script>

可以使用多個v-models

vue2.x一個組件只能使用一個v-model，vue3.x可以使用多個v-model

<Switch v-model:value="y" v-model:checked="x"/>

//template

props:{
    value:Boolean,
    checked:Number
},
setup(props,context){
    const toggle=()=>{
        context.emit('update:value',!props.value)
        context.emit('update:checked',2)
    }
    return {toggle}
}