黄片试看久久免费影视,97无码人妻视频

vue3的setup還能這么用

一、前言
vue3文檔地址：

https://v3.cn.vuejs.org/

本文來說一說vue3的setup都能怎么用

借用官網(wǎng)一句話

setup 選項是一個接收 props 和 context 的函數(shù)

也就是說它的基本寫法應(yīng)該是這樣的

export default{
    name: 'test',
    setup(props,context){

     return {}   // 這里返回的任何內(nèi)容都可以用于組件的其余部分
    }
    // 組件的“其余部分”
}

接收一個props和context函數(shù)并且將setup內(nèi)的內(nèi)容通過return暴露給組件的其余部分。

二、setup注意點
由于在執(zhí)行 setup函數(shù)的時候，還沒有執(zhí)行 Created 生命周期方法，所以在 setup 函數(shù)中，無法使用 data 和 methods 的變量和方法

由于我們不能在 setup函數(shù)中使用 data 和 methods，所以 Vue 為了避免我們錯誤的使用，直接將 setup函數(shù)中的this 修改成了 undefined

三、定義響應(yīng)式數(shù)據(jù)
ref reactive
vue3通過ref reactive來定義響應(yīng)式數(shù)據(jù)

ref我們用來將基本數(shù)據(jù)類型定義為響應(yīng)式數(shù)據(jù)，其本質(zhì)是基于Object.defineProperty()重新定義屬性的方式來實現(xiàn)（ref更適合定義基本數(shù)據(jù)類型）

reactive用來將引用類型定義為響應(yīng)式數(shù)據(jù)，其本質(zhì)是基于Proxy實現(xiàn)對象代理

基本數(shù)據(jù)類型（單類型）：除Object。String、Number、boolean、null、undefined。
引用類型：object。里面包含的 function、Array、Date。
定義

<script>
import {ref, reactive} from "vue";
export default {
name: "test",
setup(){
    // 基本類型
    const nub = ref(0)
    const str = ref('inline')
    const boo = ref(false)
    // 引用類型
    const obj = reactive({
      name:'inline',
      age:'18'
    })
    const arr = reactive(['0','1','2'])

    return{
      nub,
      str,
      boo,

      obj,
      arr,
    }
}
}
</script>
復(fù)制代碼
使用

<template>
    <div>
      <h1>基本類型</h1>
      <p>nub:{{ nub }}</p>
      <p>str:{{ str }}</p>
      <p>boo:{{ boo }}</p>
    </div>
    <div>
      <h1>引用類型</h1>
      <p>obj:{{ obj.name }}</p>
      <p>arr:{{ arr[1] }}</p>
    </div>
</template>
復(fù)制代碼

四、toRefs
如果我們用reactive的形式來定義響應(yīng)式變量

setup(){
const obj = reactive({
    name:'inline',
    gender:'男',
    age:'18'
})

return{
    obj
}
}
復(fù)制代碼
使用

<div>
<p>姓名:{{ obj.name }}</p>
<p>性別:{{ obj.gender }}</p>
<p>年齡:{{ obj.age }}</p>
</div>
復(fù)制代碼
這樣我們是不是發(fā)現(xiàn)在模板內(nèi)使用參數(shù)很麻煩，那我們想直接用{{ name }}的方式訪問行不行，答案是可行的

這里我們使用es6的擴展運算符

setup(){
const obj = reactive({
    name:'inline',
    gender:'男',
    age:'18',
})

return{
    ...obj,
}
}
復(fù)制代碼
使用

<div>
<p>姓名:{{ name }}</p>
<p>性別:{{ gender }}</p>
<p>年齡:{{ age }}</p>
</div>

<div>
<button @click="name = 'juejin'">改變姓名</button>
<button @click="gender = '女'">改變性別</button>
<button @click="age = '20'">改變年齡</button>
</div>
復(fù)制代碼
結(jié)果

這里看到我們的參數(shù)都正常的顯示到了頁面上，但是我們?nèi)ジ淖儏?shù)時發(fā)現(xiàn)視圖并沒有更新，這是為什么呢？？？我們把擴展運算符寫成它的等價格式

const obj = reactive({
    name:'inline',
    gender:'男',A
    age:'18',
})
// ...obj ==> name:obj.name
復(fù)制代碼
哎哎哎，等下我的鼠標(biāo)浮動上去怎么提示我name只是一個字符串？

image.png
那我們在看看我們用ref定義值時提示什么

image.png
奧奧，這個時候我們看到name是一個Ref<string>，是一個響應(yīng)式字符串。

這樣我們就找到了為什么沒有更新視圖的原因，當(dāng)我們用...擴展運算符時我們得到的只是一個普通類型的數(shù)值，并不是一個響應(yīng)式數(shù)據(jù)

為了解決這個問題呢，vue3給我們提供了toRefs函數(shù),來讓我們看看效果如何

setup(){
const obj = reactive({
    name:'inline',
    gender:'男',
    age:'18',
})

return{
    ...toRefs(obj),
}
}
復(fù)制代碼
<div>
<p>姓名:{{ name }}</p>
<p>性別:{{ gender }}</p>
<p>年齡:{{ age }}</p>
</div>

<div>
<button @click="name = 'juejin'">改變姓名</button>
<button @click="gender = '女'">改變性別</button>
<button @click="age = '20'">改變年齡</button>
</div>
復(fù)制代碼
參數(shù)都可以正常改變，成功改頭換面

toRefs總結(jié)
toRefs會將我們一個響應(yīng)式的對象轉(zhuǎn)變?yōu)橐粋€普通對象，然后將這個普通對象里的每一個屬性變?yōu)橐粋€響應(yīng)式的數(shù)據(jù)

五、setup中執(zhí)行方法
方式一
以reactive定義響應(yīng)式數(shù)據(jù)的方式來定義方法

<script>
import {ref, reactive,toRefs} from "vue";

export default {
name: "test",
setup(){
    const str = ref('inline')
    const fun = reactive({
      fun1(data){
        console.log(str.value)
        this.fun2(data)
      },
      fun2(data){
        console.log(data)
        console.log('我是fun2')
      }
    })

    return{
      ...toRefs(fun),
    }
}
}
</script>
復(fù)制代碼
通過點擊事件將值傳給fun1，fun1接收到后在傳給fun2

這里我們用this.fun2()的方式去調(diào)用fun2，為什么這里用this可以正常執(zhí)行不會報undefind，因為這里的this非彼this，Vue2里的this是實例這里的this是對象

<button @click="fun1('你好')">點我1</button>
復(fù)制代碼
結(jié)果,成功調(diào)用并輸出

image.png
方式二
注意這里調(diào)用fun2的方式與方式一不同，直接調(diào)用就可以，不用this調(diào)用

export default {
name: "test",
setup(){
      const fun1 = (data) => {
        fun2(data)
      }
      const fun2 = (data) => {
        console.log(data)
      }
    return{
      fun1,
    }
}
}
復(fù)制代碼
調(diào)用

<button @click="fun1('你好 inline')">點我1</button>
復(fù)制代碼
結(jié)果

image.png
方式三
這種方式避免了將功能邏輯都堆疊在setup的問題，我們可以將獨立的功能寫成單獨的函數(shù)

這里我在setup外寫了fun() login()兩個功能函數(shù)，并在setup內(nèi)分別調(diào)用

import {ref, reactive,toRefs} from "vue";

export default {
name: "test",
setup(){
    const test1 = fun()      // 如果函數(shù)返回參數(shù)過多，可以賦值給變量并用擴展運算符暴露給組件的其余部分
    const { test } = login() // 也可單個接收
    return{
      ...toRefs(test1),
      test,
    }
}
}

// 功能1
function fun(){
let str = ref('我是功能1')
function fun1(data){
    console.log(str.value)
    fun2(data)
}
function fun2(data){
    console.log(data)
}
return{
    fun1,
    fun2,
}
}

// 功能2
function login() {
const obj = reactive({
    msg:'我是功能2，我愛掘金'
})
function test() {
    console.log(obj.msg)
}
return{
    test
}
}
</script>
復(fù)制代碼
調(diào)用

<button @click="fun1('你好 inline')">點我1</button>
<button @click="test">點我2</button>
復(fù)制代碼

方式四
與方式三一樣，只是我們將兩個功能函數(shù)提取出來放在單獨的.js文件中

image.png
然后引入組件，并在setup內(nèi)調(diào)用

<template>
<div style="text-align: center;margin-top: 50px">
    <button @click="fun1('你好 inline')">點我1</button>
    <button @click="test">點我2</button>
</div>
</template>

<script>
import {ref, reactive,toRefs} from "vue";
import { fun,login } from './test.js'
export default {
name: "test",
setup(){
    const test1 = fun()
    const { test } = login()
    return{
      ...toRefs(test1),
      test,
    }
}
}

</script>
復(fù)制代碼
方式五
我們還可以這樣寫，這里我定義一個reactive響應(yīng)式對象，賦值給login變量，這個響應(yīng)式對象內(nèi)有我們登錄需要的參數(shù)、驗證和方法，這里我們?nèi)糠旁趌ogin這個響應(yīng)式對象內(nèi)然后用toRefs及擴展運算符暴露出去

<script>
import {ref, reactive,toRefs} from "vue";

export default {
name: "test",
setup(){
    const login = reactive({
      param: {
        username: '123',
        password: '123456',
      },
      rules: {
        username: [{ required: true, message: '請輸入用戶名', trigger: 'blur' }],
        password: [{ required: true, message: '請輸入密碼', trigger: 'blur' }],
      },
      login(){
        this.param.username = 'inline'
        this.param.password = '123456'
        console.log('成功登錄！')
      }
    })

    return{
      ...toRefs(login),
    }
}
}
</script>
復(fù)制代碼
我們使用一下

<input type="text" v-model="param.username">
<input type="password" v-model="param.password">
<button @click="login">登錄</button>
復(fù)制代碼

image.png
正常執(zhí)行，所以我們還可以將一個功能的所有方法和相關(guān)參數(shù)寫在一個reactive對象內(nèi)

如有遺漏的執(zhí)行方式歡迎評論區(qū)指出~~~

六、script setup
script setup已在vue3.2的版本上正式發(fā)布

用法

<script setup>

</script>
復(fù)制代碼
是不是異常簡單

變量方法無需return
使用<script setup>時，模板被編譯成一個內(nèi)聯(lián)在 setup 函數(shù)作用域內(nèi)的渲染函數(shù)。這意味著內(nèi)部聲明的任何頂級綁定<script setup>都可以直接在模板中使用

<script setup>
const msg = 'Hello!'
</script>

<template>
<div>{{ msg }}</div>
</template>
復(fù)制代碼
script setup內(nèi)定義的變量和方法無需返回，可直接使用

組件引入
導(dǎo)入的組件無需注冊，可直接使用

<script setup>
// 導(dǎo)入的組件也可以直接在模板中使用
import Foo from './Foo.vue'
import { ref } from 'vue'

// 編寫合成API代碼，就像在正常設(shè)置中一樣
// 不需要手動返回所有內(nèi)容
const count = ref(0)
const inc = () => {
    count.value++
}
</script>

<template>
<Foo :count="count" @click="inc" />
</template>
復(fù)制代碼
發(fā)布Props和Emits
<script setup>

const props = defineProps({
    foo: String
})

const emit = defineEmits(['update', 'delete'])
</script>
復(fù)制代碼
普通script和script setup
script setup可以和script同時存在

<script>
export const name = 1
</script>

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>
復(fù)制代碼
script setup 附加選項
script setup給我們提供了大多數(shù)與 options api等效的能力

就是說options api能辦到的事 script setup大部分都能辦到

那還有哪些是script setup做不到的呢？如下：

name
inheritAttrs
插件或庫所需要的自定義選項
那我要是想用這些怎么辦呢？答案是分開寫

<script>
export default {
    name: 'CustomName',
    inheritAttrs: false,
    customOptions: {}
}
</script>

<script setup>
// script setup logic
</script>
復(fù)制代碼
defineExpose
script setup定義的變量默認不會暴露出去，因為變量這時候包含在setup的閉包中。這時我們可以使用definExpose({ })來暴露組件內(nèi)部屬性給父組件使用

<script setup>
const a = 1
const b = ref(2)

defineExpose({
    a,
    b
})
</script>
復(fù)制代碼
當(dāng)父組件通過模板引用獲取此組件的實例時，檢索到的實例將會是這樣{ a: number, b: number }（引用會像在普通實例上一樣自動展開）

關(guān)于本文

https://juejin.cn/post/7029339447078420493

七、寫在最后
script setup可以說的東西還有很多，我們可以深入探索。

在我們閱讀完官方文檔后，我們一定會進行更深層次的學(xué)習(xí)，比如看下框架底層是如何運行的，以及源碼的閱讀。

    這里廣東靚仔給下一些小建議：
在看源碼前，我們先去官方文檔復(fù)習(xí)下框架設(shè)計理念、源碼分層設(shè)計
閱讀下框架官方開發(fā)人員寫的相關(guān)文章
借助框架的調(diào)用棧來進行源碼的閱讀，通過這個執(zhí)行流程，我們就完整的對源碼進行了一個初步的了解
接下來再對源碼執(zhí)行過程中涉及的所有函數(shù)邏輯梳理一遍

作者：廣東靚仔

歡迎關(guān)注：前端早茶

在线午夜精品自拍小视频_无码av无码专区线_亚洲无码精品人妻_人人澡欧美一区

前端高級