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

2021-06-14 17:33:05 阅读：181 来源： 互联网

标签：xing computed watch let user Vue3 fullName

1使用计算属性 computed 实现按钮是否禁用

我们在有些业务场景的时候，需要将按钮禁用。
这个时候，我们需要使用(disabled)属性来实现。
disabled的值是true表示禁用。false表示可以使用。
由于disabled的值是动态变化的。
此时我们就可以使用计算属性computed 这个方法。
只要值发生变化 他就会重新去计算。
在vue3中，如果需要使用computed需要引入。

<template>
 <div>
    <div>
      <div>
        <input type="txet" v-model="cont"  />
      </div>
      <button @click="func1" :disabled="flag">按钮</button>
    </div>
 </div>
</template>
<script>
import {ref,computed} from 'vue'
export default {
  name: 'App',
  setup(){
    let cont=ref();
    function func1(){
      console.log(cont.value)
    }
    //按钮是否可以使用
    let flag=computed(()=>{
     return ( cont.value ? false : true )
    })
    return {flag,cont,func1}
  },
}
</script>

2 将上面的控制按钮是否可以点击逻辑抽离出去

<template>
 <div>
    <div>
      <div>
        <input type="txet" v-model="cont"  />
      </div>
      <button @click="func1" :disabled="flag">按钮</button>
    </div>
 </div>
</template>
<script>
import {ref,computed} from 'vue'
export default {
  name: 'App',
  setup(){
    let cont=ref();
    function func1(){
      console.log('我可以点击了')
    }
    let {flag}=funFlag(cont);
    return {flag,cont,func1}
  },
}

// 在vue3的computed计算属性中。我们需要使用的话
// 需要引入computed。
// computed 经常使用在按钮是否可以点击这样的场景
// disabled=false;顾名思义可以点击。 disabled=true不可以使用
//按钮是否可以使用
function funFlag(cont){
  let flag=computed(()=>{
    return ( cont.value ? false : true )
  })
  return {flag}
}
</script>

3 computed实现姓名的拼接

上面那一个案例实现的是按钮是否可以点击，
这次我们是用 computed 实现姓名的拼接。
其实computed只要是一个数据依赖另外几个或者一个数据的变化而变化的时候。
我们就可以使用computed 。
vue3中的计算属性的函数中如果只传入一个回调函数，表示的是get

<template>
 <div>
    <div>
      <div>
        姓：<input type="txet" placeholder="请输入姓" v-model="user.xing"  /> <br>
        名：<input type="text" placeholder="请输入名" v-model="user.ming">
      </div>
    </div>

    <div>
       计算属性的使用
        <input type="txet" placeholder="显示的是姓名" v-model="fullName" />
    </div>

 </div>
</template>
<script>
import {reactive,computed} from 'vue'
export default {
  name: 'App',
  setup(){
    let user=reactive({
      xing:"李",
      ming:"自成",
    })
    // vue3中的计算属性的函数中如果只传入一个回调函数，表示的是get
    let fullName=computed(()=>{
      return user.xing+"_"+user.ming
    })
    return {fullName,user}
  },
}
</script>

4 computed中get和set的使用

当我们输入姓和名的时候，
下面的input框会进行拼接。
当我们改变下面input框的时候，上面姓的input框和名的input框的值，也会对应发生变化
如果我们需要使用computed的get和set方法的话，需要传递的是一个对象。
如果不需要使用get和set方法。传递的是一个箭头函数

<template>
 <div>
    <div>
      <div>
        姓：<input type="txet" placeholder="请输入姓" v-model="user.xing"  /> <br>
        名：<input type="text" placeholder="请输入名" v-model="user.ming">
      </div>
    </div>

    <div>
       计算属性的使用
        <input type="txet" placeholder="显示的是姓名" v-model="fullName" />
    </div>

 </div>
</template>
<script>
import {reactive,computed} from 'vue'
export default {
  name: 'App',
  setup(){
    let user=reactive({
      xing:"李",
      ming:"自成",
    })
    let fullName=computed({
      //取user中值的时候触发
      get(){
        console.log(1)
        return user.xing+"_"+user.ming
      },
      // 当重新设置fullName值发生变化的时候就会触发
      set(value){
        // value是fullName中显示的值
        let names=value.split("_");
        user.xing=names[0];
        user.ming=names[1];
      }
    })
    return {fullName,user}
  },
}
</script>

5.watch属性中immediate，deep 的用法

immediate:true 表示的是会默认执行一次watch，
这样界面初次渲染数据才能够正确的显示姓和名的拼接。

deep:true,表示的是会进行深度的监听,
当我们监听的是一个对象，对象中的任何一个值发生变化的时候。
watch就会监听到.

<template>
  <div>
    <div>
      <div>
        姓：<input type="txet" placeholder="请输入姓" v-model="user.xing" />
        <br />
        名：<input type="text" placeholder="请输入名" v-model="user.ming" />
      </div>
    </div>
    <div>
      计算属性的使用
      <input type="txet" placeholder="显示的是姓名" v-model="fullName" />
    </div>
  </div>
</template>
<script>
import { reactive,ref, watch} from "vue";
export default {
  name: "App",
  setup() {
    let user = reactive({
      xing: "李",
      ming: "自成",
    });

    let fullName=ref('');

    // 初次渲染的时候，无法自动去拼接姓和名
    // watch(user,({xing,ming })=>{
    //     fullName.value=xing+"_"+ming
    // })

    // 这里使用了解构
    // immediate:true 表示的是会默认执行一次watch，
    // deep:true,表示的是会进行深度的监听
    // 这样界面初次渲染数据才能够正确的显示姓和名的拼接
    watch(user,({xing,ming })=>{
      fullName.value=xing+"_"+ming
    }, {immediate:true,}
    )
    return { fullName, user };
},
};
</script>

6.watch监听两个或者两个以上的数据监听

有两种方式：
第一种：再写一个watch.
第二种：一个watch.把他们变成一个数组
我更喜欢在写一个watch。可能很多人不太喜欢这样。
但是我觉得很直观

7. watchEffect 的用法

需要引入watchEffect 这个方法
监视，不需要配置immediate:true，
本身就会被默认执行一次

<template>
  <div>
    <div>
      <div>
        姓：<input type="txet" placeholder="请输入姓" v-model="user.xing" />
        <br />
        名：<input type="text" placeholder="请输入名" v-model="user.ming" />
      </div>
    </div>
    <div>
      计算属性的使用
      <input type="txet" placeholder="显示的是姓名" v-model="fullName" />
    </div>
  </div>
</template>
<script>
import { reactive,ref, watchEffect} from "vue";
export default {
  name: "App",
  setup() {
    let user = reactive({
      xing: "李",
      ming: "自成",
    });
    let fullName=ref('');
    // 监视，不需要配置immediate:true，
    // 本身就会被默认执行一次
    watchEffect(()=>{
        fullName.value=user.xing+"_"+user.ming
    })
    return { fullName, user };
  },
};
</script>

标签：xing,computed,watch,let,user,Vue3,fullName
来源： https://www.cnblogs.com/IwishIcould/p/14882525.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9