[JavaScript知识库] vue3组件化开发（一）

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue3组件化开发（一） -> 正文阅读

[JavaScript知识库]vue3组件化开发（一）

上节课的补充：?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元素上创建双向数据绑定

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