五、vue3组件化开发（一）

半个开心果

已于 2022-10-10 08:50:43 修改

阅读量521

点赞数

分类专栏： vue javascript 文章标签： javascript vue.js 前端

于 2022-09-23 15:00:41 首次发布

本文链接：https://blog.csdn.net/qq_37299479/article/details/126991258

版权

javascript 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

vue

19 篇文章 0 订阅

订阅专栏

上节课的补充： watch案例

1、如果监听对象或者数组的某一项东西，他在发生改变时，新旧值是同一个值，vue3文档中有说明

因为引用赋值所以新旧值相同，引用的是一个地址里面的同一个值，旧的值已经被改变了

2、数组如何监听

<body>
  <div id="app">  
    
    
  </div>
  <template id = "myapp">
    {{friends[0].name}}
    <button @click = "changeFriendName">changeFriendName</button>
  </template>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  

Vue.createApp({
  template:"#myapp",
  data(){
    return {
      friends:[
        {
          name:"zhangsan"
        },
        {
          name:"lisi"
        }
      ]
    }
  },
  watch:{
    // "friends[0].name":{
    //   handler(newfriend,oldfriend){
    //     console.log(newfriend,oldfriend)
    //   },
    //   deep:true
    // }
    friends:{
      handler(newfriend,oldfriend){
        console.log(newfriend,oldfriend);
      },
      deep:true
    }
  },
  methods:{ 
    changeFriendName(){
      this.friends[0].name = "zhaoliu"
    }
  }
}).mount("#app")
</script>
</body>

另一种监听：一般数组用来遍历展示内容，所以一般应该在子组件监听props 对象的属性

3、关于对象的引用，浅拷贝和深拷贝

3.1、对象的引用赋值3

var info = {
    name:"why"
  };
  var obj = info;
  obj.name = "kobe";
  console.log(info.name==obj.name,info.name);//true 'kobe'

3.2、对象的浅拷贝

var info = {
    name:"why",
    friends:{
      name:"zhangsan",
      height:1.88
    }
  };
  var obj = Object.assign({},info);
  obj.name = "kobe";
  console.log(info.name);//why
  info.friends.name = "lisi";
  console.log(obj.friends.name);//lisi

3.3、对象的深拷贝深拷贝不会互相影响

var info = {
    name:"why",
    age:12,
    friends:{
      name:"zhangsan",
      height:1.88
    }
  };
  var obj = JSON.parse(JSON.stringify(info));//深拷贝
  console.log(obj);
  info.name = "lisi";
  console.log(obj.name);//why
  info.friends.name = "zhaoliu";
  console.log(obj.friends.name);//zhangsan

3.4、浅拷贝和深拷贝的另一种插件方式 lodash

lodash 实现浅拷贝： _.clone(info)

var info = {
    name:"why",
    friends:{
      name:"zhangsan",
      height:1.88
    }
  };
  var obj = _.clone(info);
  info.name = "zhangsan"
  console.log(obj.name);//why
  info.friends.name = "zhaoliu";
  console.log(obj.friends.name);//zhaoliu

lodash实现深拷贝：_.cloneDeep(info)

var info = {
    name:"why",
    age:12,
    friends:{
      name:"zhangsan",
      height:1.88
    }
  };
  var obj = _.cloneDeep(info);
  console.log(obj);
  info.name = "lisi";
  console.log(obj.name);//why
  info.friends.name = "zhaoliu";
  console.log(obj.friends.name);//zhangsan

本节课的知识点

1、表单 v-model 的基本使用

v-model 可以在input，textarea,select元素上创建双向数据绑定

它会根据控件类型自动选择正确的方法来更新元素