在vue3的setup语法糖中,defineProps不需要引入了

  1. <script setup>
  2. import { computed } from '@vue/reactivity';
  3. import { onMounted, watch } from 'vue';
  4. let props = defineProps(['playlist'])
  5. console.log(props.playlist) // 不能获取值,因为父组件这时候还没传值过来
  6. // onMounted(() => {
  7. // setTimeout(() => {
  8. // console.log('23:', props.playlist); // ok
  9. // }, 800)
  10. // })
  11. let bmsg = watch(() => props.playlist, (a, pre) => { // watch函数监听props.playlist的值
  12. console.log("2345:", a);
  13. console.log("2345pre:", pre);
  14. },{immediate:true}) // immediate:true,让watch立即执行回调打印值
  15. let msg = computed(() => { // 立即执行
  16. console.log('23:', props.playlist);
  17. return props.playlist
  18. })

vue3中的defineProps,watch,computed的更多相关文章

  1. vue 3 学习笔记 (七)——vue3 中 computed 新用法

    vue3 中 的 computed 的使用,由于 vue3 兼容 vue2 的选项式API,所以可以直接使用 vue2的写法,这篇文章主要介绍 vue3 中 computed 的新用法,对比 vue2 ...

  2. 端午总结Vue3中computed和watch的使用

    1使用计算属性 computed 实现按钮是否禁用 我们在有些业务场景的时候,需要将按钮禁用. 这个时候,我们需要使用(disabled)属性来实现. disabled的值是true表示禁用.fals ...

  3. vue3中使用computed

    演示示例(vant组件库的轮播图): <van-swipe :loop="false" :width="150" class="my-Swipe ...

  4. vue3中watch函数

    watch 监听普通类型 let count = ref(1); const changeCount = () => { count.value+=1 }; watch(count, (newV ...

  5. Vue3中的响应式对象Reactive源码分析

    Vue3中的响应式对象Reactive源码分析 ReactiveEffect.js 中的 trackEffects函数 及 ReactiveEffect类 在Ref随笔中已经介绍,在本文中不做赘述 本 ...

  6. vue3中使用axios如何去请求数据

    在vue2中一般放在created中,但是在vue3中取消了created生命周期,请求方式有两种 直接在setup中去获取数据 setup(props) { const data = reactiv ...

  7. 浅谈Vue中计算属性(computed)和方法(methods)的差别

    浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...

  8. 在vue3中使用router-link-active遇到的坑

    在使用 router-link-active 设置链接激活时CSS类名时,发现在例如 /member/order 和 /member/order/:id 这两个都包含 /member/order的路由 ...

  9. Vue3中插槽(slot)用法汇总

    Vue中的插槽相信使用过Vue的小伙伴或多或少的都用过,但是你是否了解它全部用法呢?本篇文章就为大家带来Vue3中插槽的全部用法来帮助大家查漏补缺. 什么是插槽 简单来说就是子组件中的提供给父组件使用 ...

随机推荐

  1. Sentinel控制台1.8.3修改源码,修改配置后推送到Nacos

    目录 1. 接着上一篇 2. 思路 3. 下载Sentinel源码 4. 看Gateway里面读取的配置信息 5. 修改Sentinel控制台源码 6. 熔断规则测试 7. 限流规则测试 8. 打包使 ...

  2. 【IDEA】IDEA怎么汉化&汉化后怎么转回英文

    ① 英文转中文 1.点击左上角的File,然后选择Setting 2.达到Setting页面选择Plugins 3.在搜索框搜索chinese,选择中文语言包下载 4.找到下载插件,选择勾选上,然后o ...

  3. [网鼎杯 2020 朱雀组]phpweb-1|反序列化

    1.打开界面之后界面一直在刷新,检查源代码也未发现提示信息,但是在检查中发现了两个隐藏的属性:func和p,抓包进行查看一下,结果如下: 2.对两个参数与返回值进行分析,我们使用dat时一般是这种格式 ...

  4. EPIC限免提示

    通过云函数每周定时推送限免内容到手机 import datetime import requests requests.packages.urllib3.disable_warnings() # da ...

  5. 十一章 Kubernetes的服务发现插件--coredns

    1.前言 简单来说,服务发现就是服务(应用)之间相互定位的过程: 服务发现并非云计算时代独有的,传统的单体架构时代也会用到,以下应用场景更加需要服务发现: 服务(应用)的动态性强: 服务(应用)更新发 ...

  6. KingbaseES DBLink 扩展介绍

    DBLink 扩展插件功能与 Kingbase_FDW 类似,用于远程访问KingbaseES 数据库.相比于Kingbase_FDW,DBLink 功能更强大,可以执行DML,还可以通过 begin ...

  7. 【python】生成一段连续的日期

    date-gen.py import datetime def date_generate(start_date, end_date): print(f'Hi, {start_date}, {end_ ...

  8. Java SE 7、接口

    接口 接口就是给出一些没有实现的方法,封装到一起,到某个类要使用的时候,在根据具体情况把这些方法写出来 语法 interface 接口名{ ​ //属性 ​ //方法 } class 类名 imple ...

  9. 【一月一本技术书】-【Go语言设计与实现】- 9月

    Go : 2009.11.10 代表作:Docker.k8s.etcd 模仿C语言,目标:互联网的C语言 讲的晦涩难懂....硬板..放弃了好几次才读完.满分10分,打6分. 下个月:Python数据 ...

  10. kibana启动停止命令

    前提条件:kibana文件是属于kibana用户的 注意:路径根据具体实际情况修改 更改日志所属用户和用户组 chown kibana:kibana /usr/local/kibana-7.5.1-l ...