Vue基础学习——Vue3的Options-API

文章目录

• 前言
• 一、computed计算属性
• 二、watch监听器
• 三、v-model的用法

---

前言

在实际开发中，我们会遇到一些情况，比如我们可能需要对数据进行一些转化后再显示，或将多个数据结合起来进行显示；如果把这些逻辑直接写在template中，这样就会使得UI里放逻辑，就违背了vue设计的愿景, 这个时候compute计算属性就产生了

一、computed 计算属性

对于任何响应式数据的复杂逻辑，都应该放在使用computed

计算属性将被混入到组件实例中。所有getter和setter的上下文自动绑定为组件实例

 data() {
        return {
          firstName: "Kobe",
          lastName: "Bryant",
          score: 80,
          message: "Hello World"
        }
      },
      computed: {
        // 定义了一个计算属性叫fullname
        fullName() {
          return this.firstName + " " + this.lastName;
        },
        result() {
          return this.score >= 60 ? "及格": "不及格";
        },
        reverseMessage() {
          return this.message.split(" ").reverse().join(" ");
        }
      }

二、watch 监听器

监听器watch的配置选项：

1. watch只是在侦听info的引用变化，对于内部属性的变化说不会做出相应的，我们可以使用选项deep进行更深层的侦听；

2. 另外一个属性，是希望一开始就会立即执行一次：

3. 1. 这个时候我们使用immediate选项
   2. 这个时候无论后面的数据是否有变化，侦听的函数都会有限执行一次；

watch: {
        // 默认情况下我们的侦听器只会针对监听的数据本身的改变(内部发生的改变是不能侦听)
        // info(newInfo, oldInfo) {
        //   console.log("newValue:", newInfo, "oldValue:", oldInfo);
        // }

        // 深度侦听/立即执行(一定会执行一次)
        info: {
          handler: function(newInfo, oldInfo) {
            console.log("newValue:", newInfo.nba.name, "oldValue:", oldInfo.nba.name);
          },
          deep: true, // 深度侦听
          // immediate: true // 立即执行
        },
					//也可以监听info的属性
				'info.name': function(){
          console.log(this.info.name, 'info.name');
        }
      },

三、v-model的用法

1. v-model指令可以在表单 input，textarea以及select元素上创建双向数据绑定，
2. 它会根据控件类型自动选择正确的方法来更新元素
3. v-model本质上是语法糖，它负责监听用户的输入事件来更新数据，并在极端场景下进行一些特殊处理；

v-model的原理 ：两个操作

• v-bind绑定value属性的值；
• v-on绑定input事件监听到函数中，函数会获取最新的值赋值到绑定的属性中

//绑定textarea article是一个字符串
<textarea v-model="article"> </textarea>

//绑定checkbox -单个勾选框 isAgree是一个布尔值
<input id='agreement' type="checkbox" v-model="isAgree" />
//绑定checkbox -多个复选框 hobbies是一个数组
<label for="basketball">
  <input id="basketball" type="checkbox" v-model="hobbies" value="basketball"> 篮球
</label>
<label for="football">
  <input id="football" type="checkbox" v-model="hobbies" value="football"> 足球
</label>
<label for="tennis">
  <input id="tennis" type="checkbox" v-model="hobbies" value="tennis"> 网球
</label>

//radio gender是一个字符串 是input的value
<label for="male">
  <input id="male" type="radio" v-model="gender" value="male">男
</label>
<label for="female">
  <input id="female" type="radio" v-model="gender" value="female">女
</label>

// 绑定select fruit是一个字符串的时候就是单选，如果是一个数组就是多选
<select v-model="fruit" multiple size="2">
  <option value="apple">苹果</option>
  <option value="orange">橘子</option>
  <option value="banana">香蕉</option>
</select>