【Vue3 从入门到实战进阶式掌握完整知识体系】004-Vue语法基础：数据、方法、计算属性、侦听器

「爱情、让人受尽委屈。」 2023-10-03 08:34 5阅读 0赞

### 文章目录 ###

*   *  4、数据、方法、计算属性、侦听器
     *   *  代码
         *  运行结果
         *  计算属性和方法的不同
         *  运行结果
         *  侦听器
         *  运行结果
         *  侦听器参数
         *  代码
         *  运行结果
         *  总结

## 4、数据、方法、计算属性、侦听器 ##

### 代码 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>常用模板语法</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      const app = Vue.createApp({
         
        // 数据
        data() {
         
          return {
         
            message: "Hello World!",
            num: 20,
            price: 5
          }
        },
        // 方法
        methods:{
         
          handleClick(){
         
            alert(this.message);
          },
          // 我们在方法里面写一个 getTotal() 方法，并在插值表达式里面使用
          getTotal(){
         
            return this.num * this.price;
          }
        },
        // 我们可以在插值表达式中这么使用以得到一个总价：num * price
        // 但我们想使得插值的内容更加语义化，定义一个 total 来表示计算的结果
        // 直接在 data 里面定义 total = num * price 是不行的，因为 total 需要进行计算
        // 所以也就有了计算属性，也就是需要经过计算得到的属性
        computed: {
         
          total(){
         
            return this.num * this.price;
          }
        },
        // 这样我们就可以在插值语法中直接使用 total 了
        template: `
        <div>
          {
          { message }}
          {
          { "普通计算：" + num * price }}
          {
          { "计算属性total：" + total }}
          {
          { "方法getTotal()：" + getTotal() }}
          <button @click="handleClick">按钮</button>
        </div>
        `
      });
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210612180304826.png][]

### 计算属性和方法的不同 ###

> 计算属性：当计算属性依赖的属性发生变化时计算属性会重新计算；方法：只要页面刷新，方法就重新执行；

### 运行结果 ###

![image-20210612180941732.png][]

### 侦听器 ###

> 假如我希望在某个属性发生变化之后的 n 秒打印一条信息，我们就需要用到侦听器；
> 
> 计算属性的底层就是使用侦听器实现的，只不过我们使用计算属性更加简便！

### 运行结果 ###

![image-20210612181744506.png][]

### 侦听器参数 ###

### 代码 ###

### 运行结果 ###

![image-20210612182036634.png][]

### 总结 ###

计算属性：依赖的属性发生变化时改变；

方法：每次页面刷新就会执行；

侦听器：当侦听的某值发生变化时执行，是计算属性的底层实现；

[image-20210612180304826.png]: https://img-blog.csdnimg.cn/img_convert/6072a13561c9022833289fa750d280c2.png
[image-20210612180941732.png]: https://img-blog.csdnimg.cn/img_convert/98e399a14e0386f3025e3fc59c31dba0.png
[image-20210612181744506.png]: https://img-blog.csdnimg.cn/img_convert/c34bb2b9cb0fe98ccaf764a8f33a2505.png
[image-20210612182036634.png]: https://img-blog.csdnimg.cn/img_convert/bbe885f71bb0295b9c0488671d93f4ac.png