【4.0】vue3中的属性

【4.0】vue3中的属性

【一】计算属性computed

  • export default中的computed属性

【1】单向计算属性computed

  • 案例:输入姓和名,拼接得到姓名(但是姓名反过来显示性和名就报错)

复制代码
  person.fullname=computed(function(){
  	return person.fistname+person.lastname
  })
  #由于person.fistname+person.lastname会变,所以函数会自己变

  <template>
    <div class="about">
      <h3>姓和名组合</h3>
      <h4>请输入您的姓:<input type="text" v-model="person.fistname"> </h4>
      <h4>请输入您的名:<input type="text" v-model="person.lastname"> </h4>
      <h4>您的全名:<input type="text" v-model="person.fullname"> </h4>
    </div>
  </template>

  <script>
  import {ref, reactive, computed} from "vue";

  export default {
    name:'AboutView',
    setup(){
      //定义姓名函数
      const person=reactive({fistname:'',lastname:''})
      
      //定义pserson的fullname属性
      person.fullname=computed(function(){
        return person.fistname+person.lastname
      })
      
      return {person}
    },
  }
  </script>

【2】双向计算属性set和get

  • 类似变量1=变量2+变量3,当变量2和3变化时候1肯定变,现在1变带着2和3变

  • get是后面变前面在变,set是后面变(根据值分解参数)

复制代码
  person.fullName = computed({
  	get() { 
  		return person.firstName + person.lastName},
  	set(value) {
  		person.firstName = value.slice(0, 1)
  		person.lastName = value.slice(1)}

  <template>
    <div class="about">
      <h3>姓和名组合</h3>
      <h4>请输入您的姓:<input type="text" v-model="person.fistname"> </h4>
      <h4>请输入您的名:<input type="text" v-model="person.lastname"> </h4>
      <h4>您的全名:<input type="text" v-model="person.fullname"> </h4>
    </div>
  </template>

  <script>
  import {ref, reactive, computed} from "vue";

  export default {
    name:'AboutView',
    setup(){
      //定义姓名函数
      const person=reactive({fistname:'',lastname:''})
      // const fullname=ref('')
      person.fullname=computed(
      { get(){
        return person.fistname+person.lastname},
        set(value){
           person.fistname=value.slice(0,1)
          person.lastname=value.slice(1)
          return person.fistname,person.lastname}
        })

      return {person}
    },}
  </script>

【二】监听属性watch

【1】总结watch(value,(newValue, oldValue))

  • export default中的watch方法,放入watch中的值或者变量可以被监听,只要变化就会触发该函数,并且有俩参数(修改前,修改后)

复制代码
  watch(height, (newValue, oldValue) => {
      console.log('height变化了', newValue, oldValue)
  })
复制代码
  watch([变量1, 变量2], (newValue, oldValue) => {
      console.log('1或2变化了', newValue, oldValue)
  })

【2】监听值类型

复制代码
  <template>
    <div class="about">
      <h3>监听值类型{{height}}</h3>
      <button @click="heightadd">点我增加身高</button>
    </div>
  </template>

  <script>
  import {ref, reactive, computed, watch} from "vue";

  export default {
    name:'AboutView',
    setup(){
      //监听值类型
      const height=ref(180)
      
      //监听函数
      watch(height,(newvalue,oldvalue)=>{
        console.log(newvalue)
        console.log(oldvalue)})
        
      //变化函数  
      function heightadd(){
        height.value++
      }
      return {count,add,user_info,changename,person,height,heightadd}
    },}
  </script>

【2】监听对象类型

复制代码
  <h3>监听对象类型{{user}}</h3>
  <button @click="changeuser">点我换人</button>

  //监听对象类型
  const user=reactive({username:'zhou',age:18})
  	watch(user,(newvalue,oldvalue)=>{
  	console.log(newvalue)
  	console.log(oldvalue)
  })
  function changeuser(){
  	user.username='zhou6'
  	user.age++
  }

【3】多个变量一起监听

复制代码
  const sum = ref(100)
  const msg = ref('很好')
  function changeValue(){
      sum.value++
      msg.value='不太好'
  }

  watch([sum, msg], (newValue, oldValue) => {
      console.log('sum或msg变化了', newValue, oldValue)
  })

【4】watchEffect函数

  • 不需要指定监听谁,只要变量在watchEffect内部使用了,当这个变量发生变化了,就会触发

  • wacth更适用于需要有条件监听数据变化的场景,computed更适合用于创建派生数据和性能优化,wactheffect会追踪函数内部的所有值,消耗比较大

  • 如果多个都同时变化,只会执行一次

    复制代码
    watchEffect(() => {
        const x1 = sum.value
        const x2 = person.name
        console.log('watchEffect配置的回调执行了')
    })
相关推荐
不爱说话郭德纲4 分钟前
产品:上传图片拖拽一下怎么了 ?
前端·javascript·vue.js
make9 分钟前
AI 流式请求工具函数 (通义千问)
前端·javascript
作曲家种太阳12 分钟前
加餐-Vue3的渲染系统流程解说【手摸手带你实现一个vue3】
前端
前端太佬17 分钟前
前端对接微信扫码登录:从踩坑到填坑的全记录
前端·javascript·微信
京东零售技术25 分钟前
Taro on Harmony :助力业务高效开发纯血鸿蒙应用
前端·开源
前端大白话41 分钟前
救命!这10个Vue3技巧藏太深了!性能翻倍+摸鱼神器全揭秘
前端·javascript·vue.js
嘻嘻嘻嘻嘻嘻ys43 分钟前
《Vue 3全栈架构实战:Vite工程化、Pinia状态管理与Nuxt 3深度解析》
前端·后端
前端大白话1 小时前
前端人必看!10个JavaScript“救命”技巧,让你告别加班改Bug
前端·javascript·程序员
Rudon滨海渔村1 小时前
【Tauri】桌面程序exe开发 - Tauri+Vue开发Windows应用 - 比Electron更轻量!8MB!
javascript·electron·tauri·桌面应用
cg50171 小时前
Vue回调函数中的this
前端·javascript·vue.js