vue组合式api(ref,reactive,toRef,toRefs,computed,watch,watchEffect,props,hooks)，路由，pinia

已于 2024-09-30 18:06:29 修改
阅读量483 收藏 9
点赞数 4
文章标签： vue.js 前端 javascript
于 2024-09-29 15:18:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_79568779/article/details/142632048
版权

一、ref（基本类型数据，对象类型数据）

1.作用：定义响应式变量

2.语法：let xxx = ref(初始值)

3.返回值：一个RefImpl的实例对象，简称ref对象，ref对象的value属性是响应式的。

4.注意：js中操作数据需要写xxx.vslue，模板上不需要.value，直接使用。let xxx = ref(初始值)，xxx不是响应式的，xxx.value是响应式的。

二、reactive(对象类型数据)

1.作用：定义响应式变量

2.语法：let xxx = reactive(源对象)

3.返回值：一个Proxy的实例对象，简称响应式对象。

4.注意：reactive定义的响应式数据是深层次的。

三、ref对比reactive

1.ref 用来定义：基本类型数据，对象类型数据

reactive用来定义：对象类型数据

2.区别

ref创建的变量必须使用.value

reactive重新分配一个新对象，会失去响应式。（可以使用Object.assign去整体替换）

3.使用原则

若需要一个基本类型的响应式数据，必须使用ref。

若需要一个响应式对象，层级不深，ref，reactive都可以。

若需要一个响应式对象，层级较深，推荐使用reactive。

四、toRefs和toRef

1.作用：将一个响应式对象中的每一个属性，转换为ref对象。

2.toRefs与toRef功能一致，但toRefs可以批量转换。

<template>
  <div>
    {{ name }}{{ age }}
  </div>
</template>
<script setup>
import { reactive, toRefs, toRef } from 'vue'
let person=reactive({name:'zs',age:18})
//解构赋值后失去响应式
let {name,age} = toRefs(person)
console.log('name,age',name.value,age.value);
let n1 = toRef(person, 'age')
console.log(n1.value);
</script>

五、computed

<template>
  <div>
    姓：<input type="text" v-model="firstName"><br>
    名：<input type="text" v-model="lastName"><br>
    全名：<span>{{ fullName }}</span>
    全名：<span>{{ fullName }}</span><br>
    <button @click="changeFullName">修改名字</button>
  </div>
</template>

<script setup>
import { ref,computed} from 'vue'
let firstName=ref('z')
let lastName=ref('s')
// 定义的fullName是一个计算属性，而且是只读的
// let fullName = computed(()=>{
//   console.log('1');
//   return firstName.value.slice(0,1).toUpperCase()+firstName.value.slice(1)+lastName.value.slice(0,1).toUpperCase()+lastName.value.slice(1)
// })
// 定义的fullName是一个计算属性，可读可写
let fullName = computed({
  get(){
    console.log('1')
    return firstName.value.slice(0,1).toUpperCase()+firstName.value.slice(1)+'-'+lastName.value.slice(0,1).toUpperCase()+lastName.value.slice(1)
  },set(val){
      let [str1,str2]=val.split('-');
      firstName.value=str1;
      lastName.value=str2
  }
})
let changeFullName = ()=>{
  fullName.value='li-si'
}
</script>

六、watch

1.作用：监视数据的变化

2.只能监视以下四种数据

ref定义的数据，reactive定义的数据，getter函数(一个函数，返回一个值)，一个包含上述内容的数组。

a.监听ref定义的基本类型数据，对象类型数据

监视的是对象的地址值，想要监视内部属性的变化，需要deep属性为true

<template>
  <div>
  <p>监视ref定义的基本类型数据{{ sum }} <button @click="sum+=1">+1</button></p>
  <p>监视ref定义的对象类型数据{{ person.name }} {{ person.age }}
    <button @click="person.name+='~'">changeName</button>
    <button @click="person.age+=1">changeAge</button>
    <button @click="changePerson">changePerson</button>
  </p>
  </div>
</template>

<script setup>
import {  ref,watch} from 'vue'
let sum=ref(0)
const stopWatch= watch(sum,(newVal,oldVal)=>{
  console.log('newVal,oldVal', newVal,oldVal);
  if(newVal>10){
    stopWatch()
  }
})
let person=ref({
  name:'zs',
  age:18
})
let changePerson = ()=>{
  person.value={
    name:'ls',
    age:90
  }
}
//监视的是person的地址值，想要监视内部属性的变化，需要deep属性为true
watch(person,(newVal,oldVal)=>{
  console.log('newVal,oldVal', newVal,oldVal);
},{
  deep:true,
  immediate:true
})
</script>
 b.监听reactive定义的对象类型数据

监视的是reactive定义的对象类型数据，默认开启深度监听，该深度监听不能关闭

<template>
  <div>
  <p>监视reactive定义的对象类型数据{{ person.name }} {{ person.age }}
    <button @click="person.name+='~'">changeName</button>
    <button @click="person.age+=1">changeAge</button>
    <button @click="changePerson">changePerson</button>
  </p>
  </div>
</template>

<script setup>
import {  reactive,watch} from 'vue'
let person=reactive({
  name:'zs',
  age:18
})
let changePerson = ()=>{
  Object.assign( person,{
    name:'ls',
    age:90
  })
}
//监视的是reactive定义的对象类型数据，默认开启深度监听，该深度监听不能关闭
watch(person,(newVal,oldVal)=>{
  console.log('newVal,oldVal', newVal,oldVal);
},{
  // deep:false,
  immediate:true
})
</script>
 c.监视ref或reactive定义的对象类型数据中的某个属性
<template>
  <div>
  <p>监视响应式对象的的某个属性{{person.name}}{{ person.car.c1 }} {{ person.car.c2 }}
    <button @click="person.name='ls'">changeName</button>
    <button @click="person.car.c1='大宝马'">changeC1</button>
    <button @click="person.car.c2='大奔驰'">changeC2</button>
    <button @click="changeCar">changeCar</button>
  </p>
  </div>
</template>
<script setup>
import {  reactive,watch} from 'vue'
let person=reactive({
  name:'zs',
  age:18,
  car:{
    c1:'宝马',
    c2:'奔驰'
  }
})
let changeCar = ()=>{
  person.car={
    c1:'爱玛',
    c2:'绿驹'
  }
}
//监视响应式对象中的某个属性，且该属性是基本类型的，要写成函数式
watch(()=>person.name,(newVal,oldVal)=>{
  console.log('newVal,oldVal', newVal,oldVal);
})
//监视响应式对象中的某个属性，且该属性是对象类型的，可以直接写，也可以写成函数式，更推荐写函数式，对象监视的是地址值，对象内部需要手动开启深度监听。
watch(()=>person.car,(newVal,oldVal)=>{
  console.log('newVal,oldVal', newVal,oldVal);
},{
  deep:true
})
</script>
4.监视多个对象 
<template>
  <div>
  <p>监视多个数据{{person.name}}{{ person.car.c1 }} {{ person.car.c2 }}
    <button @click="person.name='ls'">changeName</button>
    <button @click="person.car.c1='大宝马'">changeC1</button>
    <button @click="person.car.c2='大奔驰'">changeC2</button>
    <button @click="changeCar">changeCar</button>
  </p>
  </div>
</template>
<script setup>
import {  reactive,watch} from 'vue'
let person=reactive({
  name:'zs',
  age:18,
  car:{
    c1:'宝马',
    c2:'奔驰'
  }
})
let changeCar = ()=>{
  person.car={
    c1:'爱玛',
    c2:'绿驹'
  }
}
//监视响应式对象中的某个属性，且该属性是对象类型的，可以直接写，也可以写成函数式，更推荐写函数式，对象监视的是地址值，对象内部需要手动开启深度监听。
watch([()=>person.name,()=>person.car],(newVal,oldVal)=>{
  console.log('newVal,oldVal', newVal,oldVal);
},{
  deep:true
})
</script>

七、watchEffect

立即运行一个函数，同时响应式地追踪其依赖，并在依赖更新时重新执行该函数。

watch对比watchEffect

都能监听响应式数据的变化，不同的是监听数据变化的方式不同

watch需要明确指出监视的数据

watchEffect不用明确指出监视的数据，函数中用到哪些属性，就会监听哪些属性。

<template>
  <div>
  <p>watchEffect{{water.temp}}{{ water.height }}
    <button @click="water.temp+=10">温度+10</button>
    <button @click="water.height+=10">高度+10</button>
  </p>
  </div>
</template>
<script setup>
import {  reactive,watchEffect} from 'vue'
let water=reactive({
  temp:0,
  height:0,
})
watchEffect(()=>{
  if(water.temp>=60||water.height>=80)
  console.log('water.temp,water.height',water.temp,water.height);
})
</script>

八、标签的ref属性

//父组件
<template>
  <HelloWorld ref="helloRef" />
  <button @click="logHelloRef">test</button>
</template>
<script setup>
import { ref } from 'vue';
import HelloWorld from './components/HelloWorld.vue';
const helloRef = ref(null);
const logHelloRef = () => {
  console.log('helloRef', helloRef.value);
};
</script> 

//子组件
<template>
  <div>
  <p>watchEffect{{water.temp}}{{ water.height }}
    <button @click="water.temp+=10">温度+10</button>
    <button @click="water.height+=10">高度+10</button>
  </p>
  </div>
</template>
<script setup>
import {  reactive,watchEffect,defineExpose} from 'vue'
let water=reactive({
  temp:0,
  height:0,
})
watchEffect(()=>{
  if(water.temp>=60||water.height>=80)
  console.log('water.temp,water.height',water.temp,water.height);
})
defineExpose({water})
</script>

九、props

defineProps可以省略不引入

//父组件
<template>
  <HelloWorld  :a="a" :b="list" c=123 />
</template>
<script setup>
import { ref,reactive } from 'vue';
import HelloWorld from './components/HelloWorld.vue';
let a=ref('aaaaaaaaaaa');
let list=reactive([
  {
    msg:'aa',
    num:0
  },
  {
    msg:'bb',
    num:1
  },
]);
</script>
//子组件
<template>
  <div>
  {{ props.a }}{{ props.c }}
  <ul>
    <li v-for="item in b" :key="item.num">{{ item.num }}{{ item.msg }}</li>
  </ul>
  </div>
</template>
<script setup>
import {  defineProps} from 'vue'
const props=defineProps({
  a:{
    type:String,
    required:true,
    default:'abc'
  },
  b:{
    type:Array,
    required:true,
    default:[]
  },
  c:{
    type:Number,
    required:true,
    default:0
  }
})
</script>

十、生命周期

<template>
  <HelloWorld v-if="isShow"/>
  <button @click="isShow=!isShow">flag</button>
</template>
<script setup>
import { ref } from 'vue';
import HelloWorld from './components/HelloWorld.vue';
let isShow = ref(true)
</script>

<template>
  <div>
    {{ sum }}
    <button @click="sum+=1">+1</button>
  </div>
</template>
<script setup>
import {ref, onBeforeMount, onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
let sum = ref(0)
console.log('创建');
onBeforeMount(()=>{
  console.log('挂载前');
})
onMounted(()=>{
  console.log('挂载完毕');
})
onBeforeUpdate(()=>{
  console.log('更新前');
})
onUpdated(()=>{
  console.log('更新完毕');
})
onBeforeUnmount(()=>{
  console.log('卸载前');
})
onUnmounted(()=>{
  console.log('卸载完毕');
})
</script>

十一、hooks

组合式函数约定用驼峰命名法命名，并以“use”作为开头

<template>
  <div>
    {{ sum }}{{ bigSum }}
    <button @click="add">+1</button>
  </div>
</template>
<script setup>
import useSum from '../hooks/useSum'
let {sum,add,bigSum}=useSum()
</script>

useSum.js
import { onMounted, ref, computed } from 'vue'
export default function() {
    //数据
    let sum = ref(0);
    //方法
    const add = () => {
        sum.value += 1
    };
    //计算属性
    let bigSum = computed(() => {
        return sum.value * 10
    });
    //钩子
    onMounted(() => {
        add()
    })
    return { sum, add, bigSum }
}

十二、路由

1.params写法

传递params参数时，若使用to的对象写法，必须使用name配置项，不能用path。

传递params参数时，需要提前在规则中占位。

路由的props配置，让路由组件更方便的收到参数，将路由参数作为props传给组件

路由配置router.js
import Home from '../components/HelloWorld.vue';
import News from '../components/NewsView.vue';
import Detail from '../components/DetailView.vue';

import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
    history: createWebHashHistory(),
    routes: [{
            path: '/',
            redirect: '/home'
        },
        {
            path: '/home',
            component: Home
        },
        {
            path: '/news',
            component: News,
            children: [{
                path: 'detail/:id/:title/:content',
                name: 'detail',
                component: Detail,
                props: true
            }]
        }
    ]
})
export default router;

路由跳转（三种写法）
<template>
  <div>
    <ul>
      <li v-for="news in list" :key="news.id">
        <button @click="gotoDetail(news)">{{ news.title }}</button>
        <router-link :to="`/news/detail/${news.id}/${news.title}/${news.content}`">{{ news.title }}</router-link> 
        <router-link :to="{
          name:'detail',
          params:{
            id:news.id,
            title:news.title,
            content:news.content
          }
        }
        ">{{ news.title }}</router-link> 
    </li>
  </ul>
  <router-view></router-view>
  </div>
</template>
<script setup>
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
const list = reactive([
  { 
    id:'efadsiub01',
    title:'新闻1',
    content:'xxxxxxxxxxxxxxxxxx1'
  },
  { 
    id:'efadsiub02',
    title:'新闻2',
    content:'xxxxxxxxxxxxxxxxxx2'
  },
  { 
    id:'efadsiub03',
    title:'新闻3',
    content:'xxxxxxxxxxxxxxxxxx3'
  }
])
const router = useRouter()
const gotoDetail=(news)=>{
  router.push({
    name:'detail',
    params:{
      id:news.id,
      title:news.title,
      content:news.content
    }
  })
}
</script>

//接收参数
<template>
  <div>
    <p>序号:{{ route.params.id }}</p>
    <p>标题:{{ route.params.title }}</p>
    <p>内容:{{ route.params.content }}</p>
    <p>序号:{{ id }}</p>
    <p>标题:{{ title }}</p>
    <p>内容:{{ content }}</p>
  </div>
</template>
<script setup>
import { useRoute } from 'vue-router';
const route = useRoute()
defineProps(['id','title','content'])
</script>
2.query写法
//路由配置router.js
import Home from '../components/HelloWorld.vue';
import News from '../components/NewsView.vue';
import Detail from '../components/DetailView.vue';
import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
    history: createWebHashHistory(),
    routes: [{
            path: '/',
            redirect: '/home'
        },
        {
            path: '/home',
            component: Home
        },
        {
            path: '/news',
            component: News,
            children: [{
                path: 'detail',
                name: 'detail',
                component: Detail,
                props(route) {
                    return route.query
                }
            }]
        }
    ]
})
export default router;

//路由跳转并传参
<template>
  <div>
    <ul>
      <li v-for="news in list" :key="news.id">
        <button @click="gotoDetail(news)">{{ news.title }}</button>
        <router-link :to="`/news/detail?id=${news.id}&title=${news.title}&content=${news.content}`">{{ news.title }}</router-link> 
        <router-link :to="{
          name:'detail',
          query:{
            id:news.id,
            title:news.title,
            content:news.content
          }
        }
        ">{{ news.title }}</router-link> 
    </li>
  </ul>
  <router-view></router-view>
  </div>
</template>
<script setup>
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
const list = reactive([
  { 
    id:'efadsiub01',
    title:'新闻1',
    content:'xxxxxxxxxxxxxxxxxx1'
  },
  { 
    id:'efadsiub02',
    title:'新闻2',
    content:'xxxxxxxxxxxxxxxxxx2'
  },
  { 
    id:'efadsiub03',
    title:'新闻3',
    content:'xxxxxxxxxxxxxxxxxx3'
  }
])
const router = useRouter()
const gotoDetail=(news)=>{
  router.push({
    name:'detail',
    query:{
      id:news.id,
      title:news.title,
      content:news.content
    }
  })
}
</script>

//接收参数
    <p>内容:{{ route.query.content }}</p>
    <p>序号:{{ id }}</p>
    <p>标题:{{ title }}</p>
    <p>内容:{{ content }}</p>
  </div>
</template>
<script setup>
import { useRoute } from 'vue-router';
const route = useRoute()
defineProps(['id','title','content'])
</script>

十三、pinia

1.搭建pinia
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'
import { createPinia } from 'pinia'
const app = createApp(App)
const pinia = createPinia()
app.use(pinia)
app.use(router)
app.mount('#app')
2.存储和读取数据(state,actions,getters)
store/count.js
import { defineStore } from 'pinia'
export const useCountStore = defineStore('count', {
    state() {
        return {
            sum: 0,
            school: '第一学校',
            address: '西安',
            time: new Date()
        }
    },
    actions: {
        //this就是当前仓库
        increment(val) {
            console.log('increment');
            this.sum += val
        }
    },
    getters: {
        bigSum: (state) => {
            return state.sum * 10
        },
        formatDate(state) {
            const date = state.time;
            const year = date.getFullYear(); // 年
            const month = String(date.getMonth() + 1).padStart(2, '0'); // 月，注意月份从0开始
            const day = String(date.getDate()).padStart(2, '0'); // 日
            const hours = String(date.getHours()).padStart(2, '0'); // 小时
            const minutes = String(date.getMinutes()).padStart(2, '0'); // 分
            const seconds = String(date.getSeconds()).padStart(2, '0'); // 秒
            return {
                'YYYY-MM-DD': `${year}-${month}-${day}`,
                'DD/MM/YYYY': `${day}/${month}/${year}`,
                'MM-DD-YYYY': `${month}-${day}-${year}`,
                'YYYY/MM/DD HH:mm:ss': `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`,
                'YYYY.MM.DD': `${year}.${month}.${day}`
            };
        }
    }
})

<template>
  <div>
    <h2>求和：{{ countStore.sum }}，放大10倍：{{ bigSum }}</h2>
    <p>
      学校：{{ countStore.school }}
    </p>
    <p>{{time}}</p>
    <p>，{{ formatDate }}</p>
    <p>位置：{{ countStore.address }}</p>
    <button @click="add">批量修改</button>
  </div>
</template>
<script setup>
import { ref,toRefs } from 'vue';
import { useCountStore } from '../store/count';
import {storeToRefs} from 'pinia'
const countStore=useCountStore()
//解构赋值丢失了响应式
// const {sum,school,address} = countStore
//store中所有属性和方法都包裹成ref对象
// const {sum,school,address} = toRefs(countStore)
//storeToRefs只会关注store中的数据，不会对方法进行包裹
const {sum,school,address,time,bigSum,formatDate} = storeToRefs(countStore)

//以下两种方式都可以拿到state中的数据
console.log('sum',countStore.sum);
console.log('sum',countStore.$state.sum);
const add = ()=>{
  //第一种修改方式
  // countStore.sum+=1;
  //第二种修改方式
  // countStore.$patch({
  //   sum: 1,
  //   school: '第二学校',
  //   address: '西安1'    
  // })
  //第三种修改方式
  countStore.increment(30)
}
</script>
3.使用$subscribe订阅数据的变化 
store/talk.js
import { defineStore } from 'pinia'
import axios from 'axios'
import { nanoid } from 'nanoid'
export const useTalkStore = defineStore('talk', {
    state() {
        return {
            list: JSON.parse(localStorage.getItem('talkList')) || []
        }
    },
    actions: {
        async getLove() {
            let res = await axios.get('https://v1.hitokoto.cn')
            let obj = {
                id: nanoid(),
                title: res.data.hitokoto
            }
            this.list.unshift(obj)
        }
    }
})

<template>
  <div>
    <button @click="getLoveFn">获取一句土味情话</button>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.title }}</li>
    </ul>
  </div>
</template>
<script setup>
import {useTalkStore } from '../store/talk'
import {storeToRefs} from 'pinia'
const talkStore=useTalkStore()
talkStore.$subscribe((mutate,state)=>{
  console.log('talkStore保存的数据发生了变化',mutate,state);
  localStorage.setItem('talkList',JSON.stringify(state.list))
})
const {list}=storeToRefs(talkStore)
const getLoveFn=()=>{
  talkStore.getLove()
}
</script>
 4.store组合式写法
import { defineStore } from 'pinia'
import axios from 'axios'
import { nanoid } from 'nanoid'
import { reactive } from 'vue'
export const useTalkStore = defineStore('talk', () => {
    const list = reactive(JSON.parse(localStorage.getItem('talkList')) || [])
    async function getLove() {
        let res = await axios.get('https://v1.hitokoto.cn')
        let obj = {
            id: nanoid(),
            title: res.data.hitokoto
        }
        list.unshift(obj)
    }
    return { list, getLove }
})

想退休的搬砖人
关注
vue3 选项式 API 和组合式 API 区别
weixin_43867229的博客
05-08 1033
vue组合式和选项式的区别
Vue3 组合Api Vite
qq_37905131的博客
06-22 298
浅用Vue3 组合Api
Vue2和Vue3的emit、props、watch等知识点对比
qq_59626859的博客
10-11 973
Vue2和Vue3的emit、props、watch等知识点对比
Vue3精华回顾温习 绝对干货满满(附带学习代码自取)
暗武逢天的博客
06-07 803
Vue 3 的目标是成为下一代web开发的首选框架之一，通过持续的性能优化、API的现代化以及社区生态系统的支持，它正逐渐成为许多开发者构建现代Web应用的首选工具。
Vue3、pinia的基本知识
m0_58882768的博客
08-15 975
每一个hook就是一个函数，跟mixin类似就是一个一个的ts文件，每一个ts文件实现一个功能，都是一个模块，里面包含数据，方法等等ts文件内的数据方法要写在一个函数里，函数的数据和方法要return出去，并且将函数默认暴露在使用该功能的组件里引用即可const sumData = useSum() //useSum()返回的是一个普通的对象，里面的数据是ref类型的，sumData.sum.value//可以使用结构赋值。
Vue3 基础
muzidigbig的博客
03-22 1748
ref reactive Object.defineProperty() Proxy computed() 计算属性 watch() 监听数据 watchEffect() toRef unref triggerRef() 更新视图 shallowRef shallowReactive readonly shallowReadonly toRaw markRaw router路由 导航守卫 组件通信 父传子 子传父 任意组件通信mitt provide inject 组件命名 vue3 setup获取父实例
VueUse工具库 常用api
LlanyW的专栏
04-11 1694
VueUse不是Vue.use， VueUse 为Vue 2和Vue3服务的一套Vue Composition API的常用工具集，，它提供了一系列的 hooks 和工具函数，帮助我们更方便地使用 Vue Composition API。通俗的来说，这就是一个工具函数包支持了更好的逻辑分离，它可以帮助你快速实现一些常见的功能，免得你自己去写，解决重复的工作内容。以及进行了机遇 Composition API 的封装。
面试万字总结（Vue3+TS+Pinia+Vite+Vue-router4）持续更新
weixin_52901235的博客
02-03 2293
app.directive('lazy'，{ // app.directive('指令名‘，配置对象).......})泛型是可以在保证类型安全前提下，让函数等与多种类型一起工作，从而实现复用，常用于：函数、接口、class 中需求：创建一个 id 函数，传入什么数据就返回该数据本身(也就是说，参数和返回值类型相同)比如，id(10) 调用以上函数就会直接返回 10 本身。但是，该函数只接收数值类型，无法用于其他类型为了能让函数能够接受任意类型，可以将参数类型修改为 any。
vue3面试题整理（一）
wxzs9999的博客
07-18 2005
Options Api (选项API)： ，即以vue为后缀的文件，通过定义methods，computed，watch，data等属性与方法，共同处理页面逻辑。然而，当组件变得复杂，导致对应属性的列表也会增长，这可能会导致组件难以阅读和理解。Composition API 中，组件根据逻辑功能来组织的，一个功能所定义的所有 API 会放在一起（ 更加的 高内聚，低耦合 ）。
Vue3快速上手
郭宝的博客
09-09 603
不需要，watch会自动读取。
Vue3.0云里雾里
weixin_55493330的博客
03-27 1614
/基本类型的响应式数据let name = ref('张三')//对象类型的响应式数据hobbyname: '章子怡',age: 45,sex: '男'})ref可以定义基本类型的响应式数据，也可以定义对象类型的响应式数据ref的底层还是reactive区别：1.ref创建的变量必须使用.value可以使用volar自动添加.value2.reactive重新定义一个对象hobby的时候，这个对象就失去了响应式属性。
Vue3 知识点总结
weixin_40011280的博客
03-21 1605
当数据更改时，将重新编译成虚拟DOM树，然后对前后两棵树进行比对（diff算法），仅将差异部分反映到真实DOM，这样既可最小程度的改动真实DOM，提升页面效率。知识点：Axios、Vuex、Stylus、插件、Vue Router、异步组件、递归组件、公用组件；{{content}} : 获取 vue里面data 里面的数据值，属双向绑定。实战项目：环境搭建、Git、数据模拟、本地开发；$就是个命名，帮你区分vue应用自身的属性，而不是你自己定义的属性。将生成的真实DOM树，放置到某个元素位置，称之为。
【学习笔记】Vue3（Ⅰ）
Eddie_hyh的博客
06-02 916
Vue3（Ⅰ）
vue面向切面_Vue3 面向对象开发指南
weixin_39743064的博客
12-30 2143
本文是 Vue3 第一次实践的总结，重点在面向对象上，也会引出一些函数式使用和相关切入点的讲解复用带来的全新开发体验Vue3 更新了逻辑复用，逻辑能够很方便地进行统一提取和使用，这其实是一切编程范式的基础，意味着在 Vue3 这一平台至上，更多的编程模型可以被应用，工程化职业化更进一步，构建复杂应用的能力也更上了一级台阶Vue3 虽然是前端三大框架中最晚实现逻辑复用的框架，Angular 在15年...
vue3 实现文本内容超过N行折叠并显示“...展开”组件
Angel_Tears_的博客
09-28 1230
> 组件内文字样式取决与外侧定义 > 组件大小发生变化时,文本仍可以省略到指定行数 > 文本不超过时, 无展开,收起按钮 > 传入文本发生改变后, 组件展示新的文本
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 898
Vue 2 中使用 Vue I18n 插件实现中英文切换
Vue 技术进阶 day2 数据监视的原理、其他内置指令、自定义指令、生命周期、组件化、VueComponent构造函数
2301_77358195的博客
09-30 946
自定义指令
vue-live2d看板娘集成方案设计使用教程
最新发布
每个人都是独一无二的，把握好自己的节奏，跟着自己的心走。
10-05 998
vue-live2d看板娘集成方案设计使用教程
vue3 ref reactive toref torefs的区别和作用
03-27
Vue3中，ref、reactive、toRef、toRefs都是响应式编程中常用的API，主要用于数据响应式处理。它们之间的区别和作用如下： 1. ref：用于对基本类型数据的响应式处理，返回一个可响应的对象。使用ref创建的数据不具有响应式的特性，需要通过.value来获取和修改值。 2. reactive：用于对对象数据的响应式处理，返回一个响应式的对象，可以直接对其属性进行修改，所有引用该对象的地方都会自动更新。 3. toRef：用于将一个响应式对象的属性转换成一个单独的响应式引用，返回一个只读的ref对象。当原对象的属性发生变化时，toRef返回的引用也会自动更新。 4. toRefs：用于将一个响应式对象转换为由其属性组成的响应式对象。返回一个包含原对象属性的只读ref对象。当原对象属性发生变化时，toRefs返回的对象中对应属性的值也会自动更新。 综上所述，ref、reactive、toRef、toRefs都是Vue3中常用的响应式API，根据数据类型和需求不同选择不同的API进行处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值