经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
Vue computed与watch用法区分
来源:jb51  时间:2023/2/2 9:09:03  对本文有异议

computed用法

  • 响应式缓存
  • 每一个计算属性都会被缓存起来,只要计算属性所依赖的属性发生变化,计算属性就会重新执行,视图也会更新
  • computed方法里面的属性不能在Date中定义
  • .具有缓存性,页面重新渲染值不变化,,计算属性会立即返回之前的计算结果,而不必再次执行函数
  1. data: {
  2. firstName: 'one',
  3. lastName: 'two'
  4. },
  5. //计算方法
  6. computed: {
  7. allname:{
  8. //回调函数 当需要读取当前属性值是执行,根据相关数据计算并返回当前属性的值
  9. get() {//
  10. return this.firstName + ' ' + this.lastName
  11. },
  12. //监视当前属性值的变化,当属性值发生变化时执行,更新相关的属性数据
  13. set(val){
  14. const names = val.split(' ');
  15. this.firstName = names[0];
  16. this.lastName = names[1];
  17. }
  18. }
  19. },

watch用法

  • 需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的
  • 应用:监听props,$emit或本组件的值执行异步操作
  • 无缓存性,页面重新渲染时值不变化也会执行

watch: {
    被监听的数据: {
        handler(新值, 旧值) {
            相关代码逻辑...
        }
    }
}

  • 被监听的数据:data中定义的数据
  • 新值:该数据改变后的新值;
  • 旧值:该数据改变之前的值。

常见应用

  • 监听本组件计算和监听
  • 计算或监听父传子的props值
  • 分为简单数据类型和复杂数据类型监听,监听方法如上watch的使用
  • 监听vuex的state或者getters值的变化
  1. computed:{
  2. stateDemo(){
  3. return this.$store.state.demoState;
  4. }
  5. }
  6. watch:{
  7. stateDemo(){
  8. console.log('vuex变化啦')
  9. }
  10. }

常见错误

当修改父组件传过来的值,会报错

  1. props:['listShop'],
  2. data(){
  3. return{}
  4. },
  5. created(){
  6. this.listShop=30
  7. }

报错,错误是说的避免直接修改父组件传入的值,因为会改变父组件的值

解决方法1,如果传的是简单类型,就在data中重新定义一个变量,改变指向,复杂类型不行,复杂类型存的是指针

  1. //不会有任何报错,也不会影响父组件!
  2. props:['listShop'],
  3. data(){
  4. return{
  5. listShopChild:this.listShop //改变指向
  6. }
  7. },
  8. created(){
  9. this.listShopChild=30
  10. }

但如果是复杂类型,因为存的是指针,赋值给新变量也会改变原始变量值

方法:

1.手动深度克隆

2.Object.assign,只会对只是一级属性复制,比浅拷贝多深拷贝了一层而已,所以还是无法达到深度克隆的目的.

3.强大的JSON.stringify和JSON.parse

4.直接用computed改变

  1. //数组深度克隆:
  2. var x = [1,2,3];
  3. var y = [];
  4. for (var i = 0; i < x.length; i++) {
  5. y[i]=x[i];
  6. }
  7. console.log(y); //[1,2,3]
  8. y.push(4);
  9. console.log(y); //[1,2,3,4]
  10. console.log(x); //[1,2,3]
  11. //对象深度克隆:
  12. var x = {a:1,b:2};
  13. var y = {};
  14. for(var i in x){
  15. y[i] = x[i];
  16. }
  17. console.log(y); //Object {a: 1, b: 2}
  18. y.c = 3;
  19. console.log(y); //Object {a: 1, b: 2, c: 3}
  20. console.log(x); //Object {a: 1, b: 2}
  21. //函数深度克隆
  22. //为什么函数可以直接赋值克隆?
  23. //由于函数对象克隆之后的对象会单独复制一次并存储实际数据,因此并不会影响克隆之前的对象。所以采用简单的复制“=”即可完成克隆。
  24. var x = function(){console.log(1);};
  25. var y = x;
  26. y = function(){console.log(2);};
  27. x(); //1
  28. y(); //2
  1. //方法三
  2. const obj1 = JSON.parse(JSON.stringify(obj));
  1. //方法四
  2. computed:{
  3. listShopChild(){
  4. return this.listShop
  5. }
  6. }

到此这篇关于Vue computed与watch用法区分的文章就介绍到这了,更多相关Vue computed与watch内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号