Vue3更新

最新推荐文章于 2024-01-21 10:33:03 发布

IT噜噜

最新推荐文章于 2024-01-21 10:33:03 发布

阅读量101

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Ghlys/article/details/128979701

版权

vue3

函数定义与状态

有两种写法：类写法（vue一样）、函数写法

定义状态

<script>
import { reactive } from '@vue/reactivity'
export default {
    //vue3老写法/vue写法中beforeCreate，created生命周期 == setup
    //自动执行，立即执行
    setup(){
        //定义状态
        const obj=reactive({
            myname:"yiyi",
            myage:100
        })
        return {
            myname,
            myage
        }
}

定义函数

setup(){
//定义函数
const handleClick=()=>{
}
return {
    handleClick
  }
 
}

访问状*

{{obj.myname}}

ref

点击按钮状态被改变

<template>
    <div>
        <!-- 这里其实是{{myname.value}},不过直接写myname，它也给你当成myname.value -->
        {{myname}}
        <button @click="handleClick()">change</button>
    </div>
</template>
<script>
import { ref } from '@vue/reactivity'
export default {
    setup(){
        const myname = ref("yiyi")//拦截的是ref对象里的value属性
        const handleClick=()=>{
            console.log(myname) //=>ref对象
            console.log(myname.value)//=>yiyi
            myname.value = 'linlin'
        }
        return{
            myname,
            handleClick
        }
    }
}
</script>

ref与reactive

ref能直接拦截到字符串，拦截到字符串的原理其实是拦截的是ref对象里的value属性

reactive 就不能拦截到字符串，只能拦截到对象和数组

两者可利用toRefs（obj）进行转换

<template>
    <div>
        //使用ref方式
        {{myname}}--{{myage}}
    </div>
</template>
 
<script>
//引入toRefs
import { reactive,toRefs } from '@vue/reactivity'
export default {
    setup(){
        //使用reactive方式
        const obj=reactive({
            myname:"yiyi",
            myage:100
        })
        return {
            //ref和reactive进行转换
            ...toRefs(obj),
        }
    }
}
</script>

父传子属性props

父组件

<template>
    <div>
        通信
        <--使用<navbar>组件-->
        <navbar myname="home" myid="111"></navbar>
    </div>
</template>
<script>
import navbar from './components/navbar.vue'
export default {
    components:{
        navbar
    }
}
</script>

子组件

<template>
    <div>
        <button>left</button>
        {{myname}}
        <button>right</button>
    </div>
</template>
<script>
export default {
    props:["myname","myid"],
    setup(data){
        console.log(data)//=>结果返回一个包含属性的对象
        console.log(data.myname,data.myid)
    }
}
</script>

子组件接收父组件传过来的属性，vue3中一样还是用props接收

子传父事件emit

子组件绑事件

<navbar @event="change"></navbar>

父组件定义change函数

const change=()=>{
 
       }

子组件控制函数执行

setup(data,{emit}){
     emit('event')
}

生命周期

类方式

类方式的生命周期用法和vue一样；

函数方式

生命周期要写在setup中
要导入生命周期

生命周期参数是一个回调函数

<script>
import {onMounted} from 'vue'
export default {
    setup(){
        ...
        onMounted(()=>{
            console.log('onMounted')
        })
        ...
    }
}
</script>

计算属性

导入计算属性：

import { computed } from '@vue/reactivity'

定义计算属性

const computedList = computed(()=>{
            return obj.datalist.filter(item=>item.includes(obj.mytext))
        })

使用计算函数

<ul>
   <li v-for="data in computedList" :key="data">
         {{data}}
   </li>
</ul>

函数用法

<template>
    <div>
        <input type="text" v-model="obj.mytext">
        <ul>
            <li v-for="data in filterlist()" :key="data">
                {{data}}
            </li>
        </ul>
        {{filterlist()}}
    </div>
</template>
<script>
import { reactive } from '@vue/reactivity'
export default {
    setup(){
        const obj=reactive({
            mytext:'',
            datalist:["aaa","abb","abc","bcc","add","bcd"]
        })
 
        //函数用法
        const filterlist=()=>{
             return obj.datalist.filter(item=>item.includes('obj.mytext'))
         }
        
        return{
            obj,
            filterlist
        }
    }
}
</script>

计算属性用法

<template>
    <div>
        <input type="text" v-model="obj.mytext">
        <ul>
            <li v-for="data in computedList" :key="data">
                {{data}}
            </li>
        </ul>
        {{computedList}}
    </div>
</template>
<script>
//导入计算属性
import { reactive,computed } from '@vue/reactivity'
export default {
    setup(){
        const obj=reactive({
            mytext:'',
            datalist:["aaa","abb","abc","bcc","add","bcd"]
        })
        //计算属性
        const computedList = computed(()=>{
            return obj.datalist.filter(item=>item.includes(obj.mytext))
        })
        return{
            obj,
            computedList
        }
    }
}
</script>

watch

watch的用法：

<template>
    <div>
        <input type="text" v-model="obj.mytext">
        <ul>
            <li v-for="data in obj.datalist" :key="data">
                {{data}}
            </li>
        </ul>
 
    </div>
</template>
<script>
import { reactive,watch } from '@vue/reactivity'
export default {
    setup(){
        const obj=reactive({
            mytext:'',
            datalist:["aaa","abb","abc","bcc","add","bcd"],
            objlist:["aaa","abb","abc","bcc","add","bcd"]
        })
        //watch监听mytext值的变化
        watch(()=>obj.mytext,()=>{
            obj.datalist=obj.objlist.filter(item=>item.includes(obj.mytext))
        })
        return{
            obj
        }
    }
}
</script>

绑定input事件的用法:效果和watch一样，只是两种不同的方法

<template>
    <div>
        <input type="text" v-model="obj.mytext" @input="handleInput">
        <ul>
            <li v-for="data in obj.datalist" :key="data">
                {{data}}
            </li>
        </ul>
 
    </div>
</template>
<script>
import { reactive } from '@vue/reactivity'
export default {
    setup(){
        const obj=reactive({
            mytext:'',
            datalist:["aaa","abb","abc","bcc","add","bcd"],
            objlist:["aaa","abb","abc","bcc","add","bcd"]
        })
 
        const handleInput=()=>{
            obj.datalist=obj.objlist.filter(item=>item.includes(obj.mytext))
        }
        return{
            obj,
            handleInput
        }
    }
}
</script>

自定义hooks

在setup里写的定义函数和状态，封装在外部的js文件里，主文件只负责调用这些函数即可,虽然composition api比之前vue的写法好像更麻烦了，但是用上自定义hooks就可以实现函数编程的复用，更加的简洁高效

主文件

setup(){
const{list1}=getData1()
const{list2}=getData2()
return{
list1,
list2
}
}

js文件

import { reactive } from "vue";
 
function getData1(){
    const obj = reactive({
        myname:"yiyi",
        myage:100
    })
    return{
        obj
    }
}
 
function getData2(){
    const handleClick=()=>{
        console.log("click")
    }
    return{
        handleClick
    }
}
 
export default {getData1,getData2}