Vue3学习笔记

最新推荐文章于 2024-03-23 14:42:37 发布
最新推荐文章于 2024-03-23 14:42:37 发布
阅读量644 收藏 1
点赞数
分类专栏： 笔记 文章标签： 前端 typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43133401/article/details/121773815
版权
Vue 3

1. setup 配置项

beforeCreate 之前执行 即：setup 中 this 不存在

1. setup 是所有Composition API "表演的舞台"
2. 组件中所用到的所有 data，methods…都要配置到 setup 中
3. setup 函数的返回值：

  • 返回一个对象，则对象的属性方法在模板中可以直接使用
  • 返回一个渲染函数

1.1 setup 配置项中的三个注意点

  • props
  • emit
  • slots

App.vue

<template>
  <Demo name="tom" :age="18" school="atguigu" @showMsg="showMsg">
    <!-- 只能用 v-slot log 中才能打印出来 -->
    <template v-slot:test1>
      <span>这里是父标签给子组件的标签体</span>
    </template>
  </Demo>
</template>

<script>

import Demo from './components/Demo.vue'
export default {
  name: 'App',
  components:{Demo},
  setup(){
    function showMsg(value){
      alert(`我是App我收到的数据是：${value}`)
    }
    return{
      showMsg,
    }
  }
}
</script>

<style>
</style>

在这里插入图片描述

Demo.vue

<template>
    <h3>这里是Demo组件</h3>
    <h3>{{name}}</h3>
    <h3>{{school}}</h3>
    <h3>{{age}}</h3>
    <slot name="test1"></slot><br>
    <button @click="showAgeType">显示年龄的类型</button><br>
    <button @click="showMsg">点击触发App传来的方法</button>
</template>

<script>
export default {
    name:'Demo',
    //接收父组件传的数据
    props:['name','school','age'],
    //接受父组件的函数
    emits:['showMsg'],
    //setup 能接受的两个参数 setup 没有 this
    setup(props,context){
        console.log('Demo 中的 setup 配置项执行了...')
        console.log(props,context)
        console.log('emit是：',context.emit);
        console.log('slots是：',context.slots);
        function showAgeType(){
            console.log(typeof(props.age))
        }
        function showMsg(){
            context.emit('showMsg',666)
        }
        return{
            showAgeType,
            showMsg,
        }
    },
    mounted() {
        console.log(this)
        console.log('Demo 组件挂载了...')
    },
}
</script>

<style>

</style>

子组件需要申明接受 父组件传来的全部参数和自定义方法 props 和 emits，不接受收 log 会 warning

computed 计算属性

不同于vue2 计算属性变成了 一个函数 简写形式只触发 get 方法 完整形式可以使用 set 方法

<template>
    姓：<input type="text" v-model="person.firstName"><br>
    名：<input type="text" v-model="person.lastName"><br>
    <span>全名：{{person.fullName}}</span><br>
    <input type="text" v-model="person.fullName">
</template>

<script>
import { computed, reactive } from '@vue/reactivity'
export default {
    name:'Demo',
    setup(){
        //使用 reactive 实现对象响应式
        let person = reactive({
            firstName:'张',
            lastName:'三'
        })
        //reactive 属性追加的属性也是响应式的

        //完整写法
        // person.fullName = computed({
        //     get(){
        //         return person.firstName + '-' + person.lastName
        //     },
        //     set(value){
        //         const nameArr = value.split('-')
        //         person.firstName = nameArr[0]
        //         person.lastName = nameArr[1]
        //     }
        // })

        //简写形式
        person.fullName = computed(()=>{
            return person.firstName + '-' + person.lastName
        })

        return{
            person,
        }
    },
}
</script>

<style>

</style>

1.2 watch监视数据变化【注意deep的使用】

监视的是 refImpl 包裹的对象

但是使用 ref 定义对象时，_value 是 Proxy 对象

即：refImpl 对象中的对象 无法进行监视

对象.value 是 Proxy 对象， 可进行监视

也可以对 ref 定义的对象使用 deep 监视

watch(监视对象，回调函数，开启immediate或者开启深度监视等)

reactive 定义的数据 在监视时无法获得 oldValue 无需开启深度监视且没法关闭

如果要监视对象的某一个属性需要使用函数

  • 情况1
<template>
   <h3>{{sum}}</h3><button @click="sum++">点击按钮改变其值</button>
   <h3>{{msg}}</h3><button @click="msg += '!'">点击按钮改变其值</button>
</template>

<script>
import { reactive,ref,watch } from 'vue'
export default {
    name:'Demo',
    setup(){
        let sum = ref(0)
        let msg = ref('你好啊')
        let person = reactive({
            name:'张三',
            age : 20,
            job:{
                salary:20
            }
        })
        // 情况一：watch监视 ref 定义的一个响应式数据
        watch(sum,(newValue,oldValue)=>{
            console.log('sum值变了',newValue,oldValue);
        },{immediate:true})

        return{
            sum,
            msg
        }
    },
}
</script>

<style>

</style>
  • 情况2
<template>
   <h3>{{sum}}</h3><button @click="sum++">点击按钮改变其值</button>
   <h3>{{msg}}</h3><button @click="msg += '!'">点击按钮改变其值</button>
</template>

<script>
import { reactive,ref,watch } from 'vue'
export default {
    name:'Demo',
    setup(){
        let sum = ref(0)
        let msg = ref('你好啊')
        let person = reactive({
            name:'张三',
            age : 20,
            job:{
                salary:20
            }
        })
        // 情况二：watch监视 ref 定义的多个响应式数据
        watch([sum,msg],(newValue,oldValue)=>{
            console.log('sum值或者msg变了',newValue,oldValue);
        },{immediate:true})

        return{
            sum,
            msg
        }
    },
}
</script>

<style>

</style>
  • 情况三

默认开启深度监视，且无法关闭

无法获取 oldValue 值 与 newValue 的值相同

<template>
   <h3>{{sum}}</h3><button @click="sum++">点击按钮改变其值</button>
   <h3>{{msg}}</h3><button @click="msg += '!'">点击按钮改变其值</button>
   <hr>
   <h3>{{person.name}}</h3><button @click="person.name += '~'">点击按钮改变其值</button>
   <h3>工资：{{person.job.salary}}</h3><button @click="person.job.salary++">点击按钮改变其值</button>
   
</template>

<script>
import { reactive,ref,watch } from 'vue'
export default {
    name:'Demo',
    setup(){
        let sum = ref(0)
        let msg = ref('你好啊')
        let person = reactive({
            name:'张三',
            age : 20,
            job:{
                salary:20
            }
        })
        // 情况三：watch监视 reactive 定义的一个响应式对象的全部属性
        watch(person,(newValue,oldValue)=>{
            console.log('person值变了',newValue,oldValue);
        },{immediate:true})

        return{
            sum,
            msg,
            person
        }
    },
}
</script>

<style>

</style>
  • 情况四

需要使用函数的返回值作为监视的对象

用不到 deep 监视

<template>
   <h3>{{sum}}</h3><button @click="sum++">点击按钮改变其值</button>
   <h3>{{msg}}</h3><button @click="msg += '!'">点击按钮改变其值</button>
   <hr>
   <h3>{{person.name}}</h3><button @click="person.name += '~'">点击按钮改变其值</button>
   <h3>{{person.age}}</h3><button @click="person.age++">点击按钮改变其值</button>
   <h3>工资：{{person.job.salary}}</h3><button @click="person.job.salary++">点击按钮改变其值</button>
   
</template>

<script>
import { reactive,ref,watch } from 'vue'
export default {
    name:'Demo',
    setup(){
        let sum = ref(0)
        let msg = ref('你好啊')
        let person = reactive({
            name:'张三',
            age : 20,
            job:{
                salary:20
            }
        })
        // 情况四：watch监视 reactive 定义的一个响应式对象的 某个属性
        // 需要使用函数 返回谁就是监视谁
        watch(()=>person.age,(newValue,oldValue)=>{
            console.log('person的age值变了',newValue,oldValue);
        },{immediat:true,deep:false})

        return{
            sum,
            msg,
            person
        }
    },
}
</script>

<style>

</style>
  • 情况五
<template>
   <h3>{{sum}}</h3><button @click="sum++">点击按钮改变其值</button>
   <h3>{{msg}}</h3><button @click="msg += '!'">点击按钮改变其值</button>
   <hr>
   <h3>{{person.name}}</h3><button @click="person.name += '~'">点击按钮改变其值</button>
   <h3>{{person.age}}</h3><button @click="person.age++">点击按钮改变其值</button>
   <h3>工资：{{person.job.salary}}</h3><button @click="person.job.salary++">点击按钮改变其值</button>
   
</template>

<script>
import { reactive,ref,watch } from 'vue'
export default {
    name:'Demo',
    setup(){
        let sum = ref(0)
        let msg = ref('你好啊')
        let person = reactive({
            name:'张三',
            age : 20,
            job:{
                salary:20
            }
        })
        // 情况五：watch监视 reactive 定义的一个响应式对象的 某些属性
        // 需要使用函数 返回谁就是监视谁
        watch([()=>person.age,()=>person.name],(newValue,oldValue)=>{
            console.log('person的age值或者name值变了',newValue,oldValue);
        },{immediat:true,deep:false})

        return{
            sum,
            msg,
            person
        }
    },
}
</script>

<style>

</style>
  • 情况6

需要使用深度监测

开启后也无法能获取 oldValue 值

<template>
   <h3>{{sum}}</h3><button @click="sum++">点击按钮改变其值</button>
   <h3>{{msg}}</h3><button @click="msg += '!'">点击按钮改变其值</button>
   <hr>
   <h3>{{person.name}}</h3><button @click="person.name += '~'">点击按钮改变其值</button>
   <h3>{{person.age}}</h3><button @click="person.age++">点击按钮改变其值</button>
   <h3>工资：{{person.job.salary}}</h3><button @click="person.job.salary++">点击按钮改变其值</button>
   
</template>

<script>
import { reactive,ref,watch } from 'vue'
export default {
    name:'Demo',
    setup(){
        let sum = ref(0)
        let msg = ref('你好啊')
        let person = reactive({
            name:'张三',
            age : 20,
            job:{
                salary:20
            }
        })
        // 特殊情况：watch监视 reactive 定义的一个响应式对象的 某个深度属性
        watch(()=>person.job,(newValue,oldValue)=>{
            console.log('person的job值变了',newValue,oldValue);
        },{immediat:true,deep:true})

        return{
            sum,
            msg,
            person
        }
    },
}
</script>

<style>

</style>

在这里插入图片描述

  • 情况7

对第六种监视使用 person.job 的形式 能强制开启对下一层整个对象的深度监视

也无法获取 oldValue 值

在这里插入图片描述
在这里插入图片描述

1.3 watchEffect

回调函数中用谁就会监视谁

<template>
   <h3>{{sum}}</h3><button @click="sum++">点击按钮改变其值</button>
   <h3>{{msg}}</h3><button @click="msg += '!'">点击按钮改变其值</button>
   <hr>
   <h3>{{person.name}}</h3><button @click="person.name += '~'">点击按钮改变其值</button>
   <h3>{{person.age}}</h3><button @click="person.age++">点击按钮改变其值</button>
   <h3>工资：{{person.job.salary}}</h3><button @click="person.job.salary++">点击按钮改变其值</button>
   
</template>

<script>
import { reactive,ref,watchEffect} from 'vue'
export default {
    name:'Demo',
    setup(){
        let sum = ref(0)
        let msg = ref('你好啊')
        let person = reactive({
            name:'张三',
            age : 20,
            job:{
                salary:20
            }
        })
        //会点函数中用到了谁 就监视谁 和 vue2中的computed属性类似，只是不注重返回
        watchEffect(()=>{
            const s1 = sum.value
            const s2 = person.job.salary
            console.log('watchEffect 中的属性：sum 或 salary 发生了改变')
        })
        return{
            sum,
            msg,
            person
        }
    },
}
</script>

<style>

</style>

1.4 toRef 和 toRefs

为了简化模板中的代码【去除对象】并保持响应式
toRef(对象，对象属性)
toRefs(对象) 解析第一层的全部属性

<template>
    <h3>用于对比是否修改了到了person：{{person}}</h3>
    <h3>{{name}}</h3><button @click="name += '~'">点击修改姓名</button>
    <h3>{{age}}</h3><button @click="age++">点击修改年龄</button>
    <h3>person.job.salary.yearsSalary:{{person.job.salary.yearsSalary}}</h3><button @click="person.job.salary.yearsSalary++">点击修改年薪</button>
    <h3>yearsSalary:{{yearsSalary}}</h3><button @click="yearsSalary++">点击修改年薪</button>
</template>

<script>
import { reactive, toRef, toRefs } from '@vue/reactivity'

export default {
    name:'Demo',
    setup(){
       let person = reactive({
           name:'张三',
           age:22,
           job:{
               salary:{
                   yearsSalary:20
               }
           },
       })
       return{
           //return对象本身
           person,
           //toRef 指定对象的某个个属性
           yearsSalary:toRef(person.job.salary,'yearsSalary'),
           //对象的全部属性，这里不包含对象本省，所以想要在外面使用person对象还需要 return对象本身
           ...toRefs(person)
       }
    },
}
</script>

<style>

</style>

2. ref 函数

创建一个包含响应式的引用对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Sz3t6siv-1638867938077)(index_files/f4256e84-eccc-419c-a6aa-ed8a852f59e5.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kl3AFM57-1638867938081)(index_files/8b74bbcd-261b-48fd-9873-9b8487dd8059.png)]

3. customRef

自定义 ref
track() 追终变化
trigger() 触发从新解析模板

4. provide 和 inject

祖组件给后代组件传递消息的方式
祖组件 provide
后代组件 inject

在这里插入图片描述在这里插入图片描述

5. 不常用方法

shallowReactive

第一层数据响应式

shallowRef

第一层响应式 【不求人 reactive】

readonly

数据不允许修改 且 log 警告

【注意】是否与reactive响应式自相矛盾呢？

答案是否定的，不用响应式 不用 readonly 数据可以被修改，只是不是响应式，即：页面不改变，但是如果使用readonly 数据是不允许修改的

shallowReadonly

第一层数据不允许修改

toRaw

将一个 reactive 生成的对象转为普通对象 【ref 生成的不行】
与响应式相反 即：让你响应式的数据变成不是响应式

markRow

将对象标记为普通对象不是响应式

vue3生命周期

自定义 hook 函数

import { reactive,onMounted,onBeforeUnmount } from "vue"

//自定义打点 hook
export default function(){
    //打点相关的数据
    let point = reactive({
        x:0,
        y:0
    })

    //打点相关的方法
    function savePoint(event){
        point.x =  event.pageX
        point.y =  event.pageY
    }

    //打点相关的生命周期钩子
    onMounted(() => {
        window.addEventListener('click',savePoint)
    }),
    onBeforeUnmount(() => {
        window.removeEventListener('click',savePoint)
    })
    return point
}

3. reactive 函数

定义一个对象类型的响应式数据 基本类型处理不了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yr2dhAR6-1638867938082)(index_files/77d65898-30b5-4796-a0f0-34697adcc6da.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TlNbDdWa-1638867938083)(index_files/30ce8b66-3e42-4ae3-9933-a2a0e4992692.png)]

2. Vue3 响应式原理

使用 Proxy 代理和 Reflect 反射

拿笔小鑫呀
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3中watch监听reactive数据和ref
G_ruirui的博客
09-08 3729
vue3中watch监听reactive和ref
vue3Watch监听RefImpl对象的说明
moxunjinmu的博客
03-07 5642
vue3Watch监听RefImpl对象的说明watch监听RefImpl对象 watch监听RefImpl对象 <script> import { ref, reactive, watch } from "vue"; export default { name: "Demo", setup() { // 数据 let sum = ref(0); let msg = ref("你好啊"); let person = ref({ name: "张
【Vue3】watch监听的五种情况
最新发布
qq_44741577的博客
03-23 1485
监视ref定义的【基本类型】数据：直接写数据名即可，监视的是其value值的改变。监视ref定义的【对象类型】数据：直接写数据名注意：监视的是对象的【地址值】，若想监视对象内部的属性，需要手动开启深度监视。若修改的是ref定义的对象中的属性，因为它们是同一个对象（内存地址不变），所以newValue和oldValue都是新值。若修改整个ref定义的对象，newValue是新值，oldValue是旧值，因为不是同一个对象了。age: 13,});
vue3watch监听ref,reactive的注意事项
weixin_67200612的博客
03-06 1062
使用vue3的注意事项
VUE框架Vue3下使用watch监听ref下的数据变化------VUE框架
春风若有怜花意，可否许我再少年
12-24 1555
VUE框架Vue3下使用watch监听ref下的数据变化------VUE框架
5.0 vue3 watch监听函数 （ref篇）
本以为成功很简单，没想到活成普通人都需拼尽全力！
12-28 2896
上一篇： vue3 computed计算属性https://blog.csdn.net/qq_42543244/article/details/122180340?spm=1001.2014.3001.5501即上一篇写完computed属性之后，今天来记录 watch监听函数，我打算写成两个部分（ref & reactive，在vue3中毫无疑问，watch也被放到了组合式api ！具体请看下方代码 <template> <h1>ref基础数据类型监听</h
vue2+vue3学习笔记
02-20
Vue2+Vue3 学习笔记 mounted 和 updated 在 Vue 中，`mounted` 和 `updated` 是两个非常重要的生命周期钩子函数。`mounted` 在页面初次加载时调用，而 `updated` 在数据改变并且要在页面重新渲染完成之后调用。...
vue3学习笔记，亲测有效，持续更新
06-14
小白上手神器，记录的是我每天学习vue3的笔记，有的收费视频观看了好几遍，亲测有效，持续更新
vue 3 学习笔记 vue3 vue3学习笔记
10-18
vue 3 学习笔记
Vue3快速上手(Vue3学习笔记)
07-11
Vue3快速上手(Vue3学习笔记) .Vue3简介 - 2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王） - 耗时2年多、[2600+次提交](https://github.com/vuejs/vue-next/graphs/commit-activity)、[30+个RFC]...
vue3学习笔记及面试题
02-14
vue3学习笔记及面试题
Vue3【组合式API、setup、响应式原理、ref对象解包、模板的语法、v-bind】
m0_52896752的博客
01-22 2026
Vue3【组合式API、setup、响应式原理、ref对象解包、模板的语法、v-bind】
vue3的新特性
qq_46043634的博客
09-02 2268
在Vue2版本中，很多函数都挂载在全局Vue对象上，比如nextTick、nextTick、nextTick、set等函数，因此虽然我们可能用不到，但打包时只要引入了vue这些全局函数仍然会打包进bundle中。组件只需引入不用注册，属性和方法也不用返回，setup函数也不需要，export default不用写，数据，计算属性和方法，自定义指令都是在template中直接可获取。与vue2中的computed配置功能一致，vue2 计算属性是一个对象 vue3是函数。
vue3获取vuex中的对象时为proxy对象，如何获取值
web15286201346的博客
03-06 1685
在使用vuex的时候发现获取state的string number类型的变量时，是可以直接通过store.state.value 取到值的，但是在取对象的时候，控制台打印出来的是Proxy 对象，Proxy对象里边的[[Target]]才是真实的对象。 //第一种获取target值的方式，通过vue中的响应式对象可使用toRaw()方法获取原始对象 import { toRaw } from '@vue/reactivity' var list = toRaw(store.state.menuList)
vue3笔记
qq_31539817的博客
05-25 2984
第一章：vue3.0基础 1，认识vue3.0 vue3.0发布时间为2020-9-18，从项目体验上，vue3.0比起vue2.0有以下优势： 打包大小减少41% 初次渲染块55%，更新渲染块133% 内存占比少54% 2，新增内容 源码重构，新增特性，重写架构。 第二章：使用vue3.0 创建vue3.0有两种方式：使用vue-cli和使用vite i.使用cli： vue create vue-name 选择vue3.0项目 2，使用vite 安装vite ..
Vue3的基本语法及使用（vue3尚硅谷学习笔记）
vayne_1的博客
10-14 3467
适合初学vue3者，以及学习观看尚硅谷视频的同学，本文精简笔记内容
vue3基本使用笔记（汇集精华版）
weixin_66721210的博客
03-16 466
vue3基本使用笔记（汇集精华版）
2024年Vue 3学习笔记：Vu3基础的完整指南
m0_63231347的博客
01-07 2526
这篇笔记中是在学习禹神最新Vue3教程记下来的，其中有一些自己写的笔记见解、搬禹神、vue、vite官网的一些笔记。主要目的还是给自己多一点知识点的总结。其实一遍下来，基本大部分都会，所以学习会很快。有几点我得好好在下面总结。
vue3学习笔记尚硅谷
08-12
- *1* *2* *3* [Vue学习笔记（尚硅谷天禹老师）](https://blog.csdn.net/qq_55593227/article/details/119717498)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值