Vue3新特性

setup函数是所有数据初始化的函数,一切函数都定义在setup里面

         setup需要return一个对象,把数据定义在这个对象里面

         setup没有this指向,不能实现双向数据绑定

vue3的生命周期(7)

            创建实例之前  setup

            挂载DOM之前  onbeforeMounted

            挂载DOM之后  onMounted

            更新组件之前   onbeforeUpdate

            更新组件之后  onUpdate

            卸载销毁之前  onbeforeUnmount

            卸载销毁后    onUnmount

      钩子函数的使用方法:{

        先把对应的钩子函数从vue里面解构出来,在setup里面定义对应的方法,在这个方法里传入的参数是一个箭头函数

      }

reactive函数

      把一个复杂数据类型定义为一个响应式的数据

    使用方法:(

      先把reactive从vue里面解构出来

      在setup里面定义对象,在对象里面定义数据

      setup把reactive的值作为返回值返回

      页面使用reactive里面的返回的值的数据

    )

toRef函数

      把单独的一个数据拿出来依然可以保持双向数据绑定

    使用方法:(

      先把方法从vue里面解构出来

      在setup里面重新let

      let 取出的变量=toRef('你需要取出数据的reactive的对象','需要取出来的数据')

    )

    在页面中使用是需要一个value的属性

toRefs函数

    把setup里面的数据分模块管理,使用扩展因算符时,里面的reactive的数据没有双向数据帮绑定

    这时需要使用toRefs来检测数据

  使用方式

    先把toRefs结构出来,

    在setup里面声明变量=对应的模块

    在return里面...声明的变量

    页面直接显示对应的数据

Ref函数

      能够定义基本数据类型为响应式

      js修改或者获取需要value属性

  使用方法

    先引入Ref函数

    声明一个变量=Ref({

      定义数据

    })

  使用js改变或者获取时,变量.value.里面的定义数据=‘新值’

Ref属性*(用于获取Dom元素的)

  使用方法:

    单个标签

      先把Ref解构,在标签上边绑定Ref属性,

      在setup函数里面使用ref(null),返回一个空的节点对象

      在onMounted钩子函数里面通过变量名.value来获取

    获取多个标签

      通过函数遍历

      在标签上通过 :ref='函数名'

      定义一个函数,这个函数的参数是每次遍历的元素,

      可以把元素放在指定的数组里面

computed(计算属性)

  把computed在项目里面解构

  基础使用:

  let 计算属性=computed(()=>{

    传递函数的返回值当计算属性的变量

    return 值;

  })

  高级使用:

  let 计算属性=computed({

    get(){

    },

    set(){

    }

  })

watch监听(深层监听)

  watch(被监听的量,(新值,旧值)=>{

  })

  想要配置默认触发选项

  定义deep:true  immediate:true  一上来就执行一次

父子组件传参

    1 在父组件模板中找到子组件标签

 *  2 通过v-bind绑定一个自定义属性名 值为传递的变量

 *  3 在子组件的js大括号里面通过props注册传递过来的属性名

 *  4 这个属性名就可以当做一个变量直接使用  或者js里面通过this.获取

 * setup函数的第一个参数就是props  可以拿到父组件给子组件传递过去的数据

子给父传参的步骤:

    从setup函数的第二个参数中解构出来emit方法

 *  1 在子组件的任意事件里面通过this.$emit方法

 *  2 this.$emit('自定义事件名称',传递过去的数据可以是多个数据)

 *  3 在父组件模板中找到子组件标签 通过@绑定自定义事件名称

 *  4 值为父组件methods里面的一个函数名

 *  5 这个去多功能函数的心肝接受传递过来的数据

 *  6 如果想要这个这个数据在父组件的其他地方使用 可以通过data定义一个变量作为中转

 */

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值