Vue3-数据响应式初识

2周前 (01-12) 47次浏览 已收录 0个评论

导读

setup、ref函数、reactive函数。

setup

组件中所用到的数据、方法、生命周期等 ,都要配置在setup中,其中setup函数有两种返回值:

  • 若返回一个对象,则对象中的属性、方法,在模版中均可以直接使用。(常用)
    • <template>
        <h1>个人信息</h1>
        <!-- 对象中的属性可以直接在模版中使用 -->
        <h2>姓名:{{name}}</h2>
        <h2>年龄:{{age}}</h2>
        <button @click="sayHello">说话</button>
      </template>
      
      <script>
      
      export default {
        name: 'App',
        setup() {
          //此处只是测试,不考虑响应式问题
          //数据
          let name = "zzl"
          let age = 16
          //方法
          function sayHello(){
            alert(`${name}+今年+${age}`)
          }
      
          //返回一个对象
          return{
            name,
            age:age,
            sayHello
          }
         }
      }
      </script>
      
  • 若返回一个渲染函数:则可以自定义渲染内容。
    • import {h} from 'vue'
          export default{
            return ()=> h('h1','尚硅谷')
          }

       

setup注意点

  • setup在beforeCreate之前执行一次,此时this是undefined
  • setup的参数
    • props:值为对象,包含:组件外部传递过来且组件内部声明接受了的属性
    • context:上下文对象
      • attrs:值为对象,包含外部传递过来,但 没有在props配置中声明的属性
      • slots:收到的插槽内容
      • emit:分发自定义事件的函数

App.vue

<template>
  <h1>父组件</h1>
  <Demo msg="zzl" @hello="showHelloMsg">
    <template v-slot:"slotName1">
      <span>内容</span>
    </template>
    <template v-slot:"slotName2">
      <span>内容</span>
    </template>
  </Demo>
</template>

<script>
import Demo from './components/Demo.vue'
export default {
  components: { Demo },
  name: 'App',
  setup() {
    function showHelloMsg(value){
      alert(`接受子组件传过来的值${value}`)
    }
    return{
      showHelloMsg
    }
  }
}
</script>

Demo.vue

<template>
  <h1>子组件</h1>
  <button @click="test">传值给父组件</button>
</template>

<script>
export default {
  name: 'Demo',
  props:['msg'],
//   emits:['hello']
  setup(props,context) {
    console.log(props) //Proxy {msg: 'zzl'}
    console.log(context.attrs)//值为对象,包含外部传递过来,但 没有在props配置中声明的属性

    console.log('收到的插槽内容',context.slots)
    function test(){
        context.emit('hello',3)
    }
    return{
      test
    }
    
   }
}
</script>

ref函数

  • 创建一个包含响应式数据的引用对象
  • js中操作 数九:xxx.value=?
  • 模版中读取数据:不需要.value,直接{{属性名}}
  • 接收的数据可以是基本类型、对象类型
    • 基本类型的数据:响应式依然靠Object.definProperty()的get与set完成的
    • 对象类型的数据:内部通过vue3封装的reactive函数完成的
<template>
  <h1>个人信息</h1>

  <!-- 解析时,会发现name是ref对象,所以会自动解析为name.value使用 -->
  <h2>姓名:{{name}}</h2>
  <h2>年龄:{{age}}</h2>
  <h2>{{job.type}}</h2>
  <h2>{{job.time}}</h2>
  <button @click="changeInfo">改变</button>
</template>

<script>

import {ref} from 'vue'
export default {
  name: 'App',
  setup() {
    //ref对象定义响应式数据引用对象 
    let name = ref("zzl")
    let age = ref(16)
    let job =ref({
      type:'前端工程师',
      time:'3年'
    })
    //方法
    function changeInfo(){
      name.value = 'wxl'
      age.value = 23
      job.value.type='前端开发工程师实习生'
      job.value.time = '0年'
    }

    //返回一个对象
    return{
      name,
      age,
      job,
      changeInfo
    }
    
   }
}
</script>

reactive函数

  • 定义一个对象类型的响应式数据(基本类型不能使用它)
  • const 代理对象 = reactive(源对象)接收一个 对象(或者数组),返回 一个代理对象(Proxy的实例对象)
  • reactice定义的响应式数据是深层次的(不管藏的有多深)

vue2 响应式举例

它存在的问题是属性的增删改,界面不会更新,直接通过下标修改数组,界面不会自动更新。而上面说的vue3就没有这些问题

  • this.$set(this.personObj,’sex’,’男’)
  • Vue.set(this.personObj,’sex’,’男’)
  • this.$delete(this.personObj,’name’)
  • Vue.delete(this.personObj,’name’,’女’)
  • this.$set(this.personObj.hobbyArry,0,’play’)
  • this.personObj.splice(0,1,’play’) //(起始索引,删除个数,替换内容

<template>
  <h1>个人信息</h1>

  <!-- 解析时,会发现name是ref对象,所以会自动解析为name.value使用 -->
  <h2>姓名:{{name}}</h2>
  <h2>年龄:{{age}}</h2>
  <h2>{{job.type}}</h2>
  <h2>{{job.time}}</h2>
  <h2>{{job.a.b.c}}</h2>
  <h2>{{hobby}}</h2>
  <button @click="changeInfo">改变</button>
</template>

<script>

import {reactive, ref} from 'vue'
export default {
  name: 'App',
  setup() {
    //ref对象定义响应式数据引用对象 
    let name = ref("zzl")
    let age = ref(16)
    let job =reactive({
      type:'前端工程师',
      time:'3年',
      a:{
        b:{
          c:666
        }
      }
    })
    let hobby = reactive(['sing','play'])
    //方法
    function changeInfo(){
      name.value = 'wxl'
      age.value = 23
      job.type='前端开发工程师实习生'
      job.time = '0年'
      job.a.b.c = 888
      // 在vue3中可以直接通过索引修改数组里的内容
      hobby[0]='say'
    }

    //返回一个对象
    return{
      name,
      age,
      job,
      changeInfo,
      hobby
    }
    
   }
}
</script>

渣渣龙, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:Vue3-数据响应式初识
喜欢 (0)

您必须 登录 才能发表评论!