1. Toy模板网首页
  2. > Toy博客

vue基本知识：methods，computed，watch，生命周期

9月前 作者：m78星云第一深情 分类：Toy博客 阅读(46) 违法举报

这篇具有很好参考价值的文章主要介绍了vue基本知识：methods，computed，watch，生命周期。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

第二单元 methods，computed，watch，生命周期

二、本单元教学目标

（Ⅰ）重点知识目标

1. methods 写法注意事项
2. computed用法
3. methods，computed 区别
4. watch 和 computed 区别
5. 生命周期函数

二、本单元知识详讲

2.1 Methods选项

使用场景：

在开发中,我们经常需要用到函数, 通过将一些需要复用的逻辑封装在函数里,多次调用这个函数来增强逻辑代码复用性，在vue中,函数被定义在methods选项里来使用,定义完后就可以在vue 表达式中调用函数

2.2.1 基本用法

语法结构：

<!-- 1. 声明方法 -->
<script>
     createApp({
        data: {
          return {}
        },
        methods: {
            // 下面两种格式都能实现功能
            方法一名:function(){
                //逻辑代码
            },
            方法二(){
                //逻辑代码
            },
        },
    }).mount('#app')
</script>
​
<!-- 2. 调用方法 -->
<!-- 2.1 在vue实例中用this调用 -->
<script>
   createApp({
        data: {
          return {}
        },
        methods: {
            // 下面两种格式都能实现功能
            方法一名:function(){
                //逻辑代码
            },
            方法二(){
                //逻辑代码
            },
        },
    }).mount('#app')
</script>
<!-- 2.2 在标签中调用 -->
 <标签 @click="方法一()"></标签>

特点：

  • 为什么加s，因为可以定义多个方法

  • methods选项的值：对象，对象中定义方法

  • methods选项表示：当前Vue实例可以用到的方法

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
  <script src="js/vue3.js"></script>
  <style>
    #app{
        width: 600px;
        margin: 30px auto;
    }
  </style>
</head>
<body>
    <div id="app">
    <button @click="showInfo(2)">单击1</button>
    <button @click="showInfo2">单击2</button>
    <span>{{msg}}</span>
</div>
    <script>
     Vue.createApp({
        data: {
          return {
           msg: '初始值',
          }
        },
        methods: {
         // 下面两种格式都能实现功能
            showInfo:function(){
              this.msg = '点击1更改的内容'
            },
            showInfo2(){
              this.msg = '点击2更改的内容'
            },
          },
        }).mount('#app')
    </script>
</body>
</html>

运行效果，如图：

2.2.2 注意事项

下面我们了解下定义Methods中的方法时，需要注意的有哪些：

  1. 在html中写入需要传递的值：

    <button @click="showInfo(2)">单击1</button>

    在方法里面接收：

    methods: {
    showInfo:function(num){
        console.log('这是我接收到的数字：',num)
        this.msg = '点击1更改的内容'
    }
}

    控制台输出:

    这是我接收到的数字：2

  2. methods里的方法第二个参数$event:它传递的是关于鼠标的一些属性和方法

  3. methods里面的方法不能使用箭头函数

    代码演示：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
  <script src="js/vue3.js"></script>
  <style>
    #app{
        width: 600px;
        margin: 30px auto;
    }
  </style>
</head>
<body>
    <div id="app">
    <button @click="showInfo">单击1</button>
    <button @click="showInfo2">单击2</button>
</div>
    <script>
         Vue.createApp({
            data: {
             return {
             msg: '初始值',
           }
            },
      methods: {
        showInfo:function(){
          console.log('this->',this)
        },
        showInfo2:()=>{
          console.log('箭头函数种得this->',this)
        },
      },
        }).mount('#app')
    </script>
</body>
</html>

    打开控制台，运行效果，如图：

    结论：

    如上述做法，在methods里定义的函数showInfo2(),如果用箭头函数的写法，this指向的将会是windows,并且windows根本访问不到data,属性中返回的数据undefined，所以不可在methods选项中使用箭头函数

2.2 计算属性

Vue中的computed属性称为计算属性。

使用场景：

我们学习Vue的模板相关的知识的时候，知道在模板内可以使用表达式，这种表达式非常的便利，但这种便利是有一定的限制的，它们实际上是只适合用于一些简单的运算。也就是说，如果在模板中放入太多的逻辑会让模板过重而且难以维护，例如：

<div id="app"> <h1>{{ message.split('').reverse().join('') }}</h1> </div>

在这个示例中，模板不再简单和清晰。看到这段代码才能意识到，这里是想要显示变量message的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理，所以这就是我们使用计算属性的原因

语法结构：

<!-- 调用方式 -->
<div id="app">
    <h1>{{ reverseString }}</h1> 
</div>
<!-- 构建方式 -->
<script type="text/javascript">
    Vue.createApp({
      data: {
        return {}
      },
      methods: {},
      //computed  属性 定义 和 data 已经 methods 平级 
      computed: {
        //  reverseString   这个是我们自己定义的名字 
        reverseString(){
        
        }
      }
    }).mount('#app')
  </script>

  1. reverseString这个是我们自己定义的名字

  2. computed 属性 定义 和 data 已经 methods平级

  3. 调用方式 {{ reverseString }} 。错误示范：{{ reverseString（） }}

特点：

  • 使用计算属性可以让模板更加的简洁

  • 计算属性是基于它们的响应式依赖进行缓存的（与method方法的区别会详细讲解）

  • computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是说多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化

代码演示：

实现字符串反转

<body>
  <div id="app">
    <h1>{{ reverseString }}</h1> 
</div>
  </div>
</body>
<script type="text/javascript">
  Vue.createApp({
    data: {
      return {
         message: 'Nihao',
         num: 100
      }
    },
    computed: {
      reverseString(){
       return this.message.split('').reverse().join('');
      }
    }
  });
</script>

效果图：

2.2.1 计算属性中的set和get方法

特点：

  • get:函数中的值被调用时启用该方法

  • set:绑定的数据被修改后会启用

  1. get方法

    一般情况下，我们只是使用了computer中的gettter属性，默认只有 getter，例如：

     <body>
    <div id="app">
    <div class="hello">
      <div id="example">
        <!-- 
          1. 渲染fullName时会调用 fullName的get方法，
          2. 控制台输出：调用了getter属性
        -->
        <p>fullName值: {{fullName}}</p>
      </div>
    </div>
 </div>
</body>
<script>
  Vue.createApp({
    data () {
      return {
        firstName: 'Foo'
      }
    },
    computed: {
      // 注意格式，需要深刻理解
      fullName: {
        get() {
          console.log('调用了getter属性')
          return '***' + this.firstName + '***'
        }
      }
    }
  }).mount('#app')
</script>
​

    说明：

    1. 渲染fullName时会调用 fullName的get方法
2. 控制台输出：调用了getter属性
3. 实际上就是我们通常使用的这种方法：
	computed: {
     reverseString: function(){
         console.log('computed')
         var total = 0;
         return total;
   	 }

    运行效果：

  2. set方法

    <body>
    <div id="app">
    <div class="hello">
      <!-- 
        点击后，调用fullName的set方法
       -->
      <button @click="ClickCeshi">点击改变fullName的值</button>
    </div>
 </div>
</body>
<script>
  Vue.createApp({
    data () {
      return {
        firstName: 'Foo'
      }
    },
    methods: {
      ClickCeshi () {
        this.fullName = 'fullName的新值'
      }
    },
    computed: {
      // 注意格式，需要深刻理解
      fullName: {
        get () {
          console.log('调用了getter属性')
          return '***' + this.firstName + '***'
        },
        set (newValue) {
          console.log('调用了settter属性')
          console.log(newValue)
          this.firstName = newValue
        }
      }
    }
  }).mount('#app');
</script>

    说明：点击后fullName的值改变，计算属性调用fullName的set方法，更新fullName的值

    运行结果，如图：

计算属性具有依赖性，只有当依赖的值发生改变，才会重新计算

同等条件下，计算属性优于 方法 以及 js表达式。

案例：模糊搜索

```vue
<div id="app">
    <input type="text" v-model="keyword" />
    <ul>
        <li v-for="value in searchList">
            <p>{{value}}</p>
        </li>
    </ul>
</div>
<script>
    const { createApp } = Vue
    createApp({
        data() {
            return {
                keyword: '',
                list: ['百度', '百度翻译', '百度地图', '百度网盘', '百度新闻', '新浪', '新闻', '新加坡']
            }
        },
        computed: {  //设置计算属性
            searchList() {
                if (this.keyword) {
                    return this.list.filter((value) => {  //过滤数组元素
                        return value.includes(this.keyword); //如果包含字符返回true
                    });
                }
            }
        }
    }).mount('#app')
</script>

2.3 couputed 与 methods 的区别

  • methods 和 computed 看起来都可以实现我们的功能，那么为什么还要多一个计算属性这个东西呢？

<body>
    <div id="app">
        <p>{{ name }}</p>
        <!-- 每次渲染走到这里都是函数执行，即使这次渲染的数据跟我这个函数无关 -->
        <p>{{ reversedMsg() }}</p>
    </div>
</body>
<script>
    const { createApp } = window.Vue
    const app = createApp({
        data() {
            return {
                msg: 'Hello',
                name: 'shanshan'
            }
        },
        methods: {
            reversedMsg: function () {
                console.log('方法执行啦');
                return this.msg.split('').reverse().join('');
            }
        }
    })
    app.mount('#app')
</script>
​
vm.name = 'duyi';
// 看控制台 reversedMsg执行了2次

  • 如果是计算属性，当给数据name重新赋值时，计算属性并不会执行。

computed 区别于 methods 的核心

在官方文档中，强调了computed 区别于 methods 最重要的两点:

  1. computed 是属性调用{{computedTest}}，而 methods 是函数调用{{methodTest()}}

    • 方法是每次触发重新渲染，调用方法将总会再次执行函数。

  2. computed 带有缓存功能，而 methods 没有

    • 计算属性是基于响应式依赖进行缓存的，计算属性的值一直存于缓存中，只要它依赖的data数据不改变，每次访问计算属性，都会立刻返回缓存的结果，而不是再次执行函数。

    • 那么，为什么需要缓存呢？（好处）——节省性能开销

  • 对于任何复杂逻辑，都应当使用计算属性

  • computed 依赖于 data 中的数据，只有在它的相关依赖数据发生改变时才会重新求值

  • computed如果要传参数 就需要在内部返回一个函数（利用闭包）

  • 计算属性和方法重名时 方法权重高

怎么给计算属性 传参数？ 利用闭包

2.4 watch监听器

使用场景：数据变化时执行异步或开销比较大的操作。

2.4.1 定义：

  • 侦听属性，响应数据（data&computed）的变化

  • 是一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。

  • 当监听的key数据变化时，会立刻执行对应的value

  • watch 中的属性 一定是data 中 已经存在的数据

  • 一般用于异步或者开销较大的操作

  • 注意：也不可以使用箭头函数，同methods

Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

2.4.2 语法类型：

函数、对象、字符串、数组

watch: {
  key: value
}

当监听的key数据变化时，会立刻执行对应的value

2.4.3 函数类型

  • 1、通过事件改变值

<body>
    <div id="app">
        <!-- 通过事件改变值 -->
        <select @change="changeBrithday" v-model="year">
            <option v-for="item in years" :value='item'>{{item}}</option>
        </select>
        <div>小明生日是{{year}},今年{{brithDay}}岁</div>
    </div>
</body>
<script>
    const { createApp } = Vue
    const app = createApp({
        data() {
            return {
                years: [1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000],
                year: 1995,
                brithDay: new Date().getFullYear() - 1995,
            }
        },
        methods: {
            changeBrithday() {
                this.brithDay = new Date().getFullYear() - this.year
            }
        }
    })
    app.mount('#app')
</script>

  • 2、通过watch配合 v-model 因为v-moel会动态改变data

<body>
    <div id="app">
        <select v-model="year">
            <option v-for="item in years" :value='item'>{{item}}</option>
        </select>
        <div>小明生日是{{year}},今年{{brithDay}}岁</div>
    </div>
</body>
<script>
    const { createApp } = Vue
    const app = createApp({
        data() {
            return {
                years: [1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000],
                year: 1995,
                brithDay: new Date().getFullYear() - 1995,
            }
        },
        watch: {
            //侦听器函数，接收两个参数，第一个为newVal(被改变的数据)，第二个为oldVal(赋值新值之前的值)。
            year(newVal,oldVal){
                console.log(newVal,oldVal);
                this.brithDay=new Date().getFullYear()-this.year
            }
        },
    })
    app.mount('#app')
</script>

2.4.4 对象类型

  • 写成对象类型时，为的是提供一些选项。

handler

  • handler选项 ，一个函数， 被侦听的数据改变时执行的回调函数。必需。

  • 其实就是上面写成函数形式的原型

  • handler的值类型为函数/字符串，写成字符串时为一个方法的名字。

const { createApp } = Vue
const app = createApp({
    data() {
        return {
            msg: '杉杉'
        }
    },
    watch: {
        msg: {
            handler () {
                console.log('msg的值改变啦');
            }
        }
    }
})
vm.msg = 'hello'; // 此时回调函数会执行，控制台中打印出 ` msg的值改变啦 `

deep

  • deep选项，布尔值。针对对象数据的侦听。

  • 在默认情况下：

    • 侦听器侦听的数据是一个对象的话，只侦听这个对象引用的变化，只有在给对象重新赋值一个引用时它才能被监听到。

    • 这个对象数据内部的成员、内部对象成员里的成员，都是监听不到的。

  • 所以需要使用deep选项：

    • 让其可以发现对象内部所有值的变化。

    • 默认是false，将deep的值设置为true，那么无论该对象被嵌套的有多深，都会被侦听到。

const { createApp } = Vue
const app = createApp({
    data() {
        return {
            personObj: {
                name: '小明',
                age: 88
            }
        }
    },
    watch: {
        personObj: {
            handler () {
                console.log('对象的值改变啦');
            },
            deep: true   // 开启深度侦听
        }
    }
})
vm.obj.name = '明明很爱你'; // 此时回调函数会执行，控制台中打印出 ` 对象的值改变啦 `

  • 注意，当对象的属性较多的时候，性能开销会比较大，因此没有必要给每一个深度属性都侦听，此时可以设置只监听对象的某个属性，这个可以用字符串类型的key解决。

immediate立即执行

  • immediate选项，布尔值。

  • 当页面第一次渲染时，数据只是添加侦听回调，并没有开启侦听。所以第一次渲染的时候侦听函数不会执行，只有后面数据变化才执行。

  • 加上immediate选项后，回调将会在侦听开始之后立刻被调用。第一次渲染的时候就触发，而不是等待侦听的数据更改后才会调用。

const { createApp } = Vue
const app = createApp({
    data() {
        return {
            msg: '杉杉'
        }
    },
    watch: {
        msg: {
            handler () {
                console.log('回调函数执行啦');
            },
            immediate: true
        }
    }
})
// 此时未更改msg的值，就会在控制台打印出来` 回调函数执行啦 `

flush回调的触发时机

当你更改了响应式状态，它可能会同时触发 Vue 组件更新和侦听器回调。

默认情况下，用户创建的侦听器回调，都会在 Vue 组件更新之前被调用。这意味着你在侦听器回调中访问的 DOM 将是被 Vue 更新之前的状态。

如果想在侦听器回调中能访问被 Vue 更新之后的 DOM，你需要指明 flush: 'post' 选项：

export default {
  // ...
  watch: {
    key: {
      handler() {},
      flush: 'post'
    }
  }
}

2.4.5 字符串类型（了解）

  • 其实就是把watch里面的方法抽离出来放到methods里

  • watch里的值为方法methods中的名字，被侦听的数据改变时，会执行该方法。

const { createApp } = Vue
const app = createApp({
    data() {
        return {
            msg: '杉杉'
        }
    },
    watch: {
        msg: 'msgChange'
    },
    methods: {
        msgChange () {
            console.log('msg的值改变啦');
        }
    }
})
vm.msg = 'hello'; // 此时msgChange函数会执行，控制台中打印出 ` msg的值改变啦 `

2.4.6 数组类型（了解）

  • 可以将函数类型、字符串类型、对象类型等多种不同值类型写在一个数组中。如：

const { createApp } = Vue
const app = createApp({
    data() {
        return {
            msg: '杉杉'
        }
    },
    watch: {
        msg: [
            'msgChange', //字符串：函数名 
            function () {}, //函数
            {//对象
                handler () {},
                deep: true,
                immediate: true
            }
        ]
    }
})

2.4.7 字符串类型key值

  • 当key值类型为字符串时，可以实现监听对象数据当中的某一个深层属性，如：

  • 就不用开启深度侦听了

const { createApp } = Vue
const app = createApp({
    data() {
        return {
            personObj: { name: '小明', age: 88 }
        }
    },
    watch: {
        'personObj.name' () {
            console.log('对象的值改变啦');
        }
    }
})
vm.obj.name = '明明很爱你'; // 此时回调函数会执行，控制台中打印出 ` 对象的值改变啦 `

2.4.8 停止侦听器(了解)

用 watch 选项或者 $watch() 实例方法声明的侦听器，会在宿主组件卸载时自动停止。因此，在大多数场景下，你无需关心怎么停止它。

在少数情况下，你的确需要在组件卸载之前就停止一个侦听器，这时可以调用 $watch() API 返回的函数：

js

const unwatch = this.$watch('foo', callback)
​
// ...当该侦听器不再需要时
unwatch()

2.4.9 watch 是异步的

const { createApp } = Vue
const app = createApp({
    data() {
        return {
            msg: 'hello，你好呀，我是杉杉',
        }
    },
    watch: {
        msg () {
          console.log('msg的值改变啦~');
        }
    },
    methods: {
        fn() {
           console.log(1);
           this.msg = 'hahaha';
           console.log(2);
        }
    }
})
​
vm.fn(); // 1  2  msg的值改变啦

  • 怎么让 console.log(2); 最后执行：利用 $nextTick

const { createApp } = Vue
const app = createApp({
    data() {
        return {
            msg: 'hello，你好呀，我是杉杉',
        }
    },
    watch: {
        msg () {
            console.log('msg的值改变啦~');
        }
    },
    methods: {
        fn() {
            console.log(1);
            this.msg = 'hahaha';
            this.$nextTick(() => {//dom更新完成后才执行，$nextTick也是一个异步
                console.log(2);
            },0)
        }
    }
})
​
vm.fn(); // 1  msg的值改变啦  2

2.5 watch 与 computed的区别

  1. 两者都可以观察和响应Vue实例上的数据的变动。功能不同，计算属性用于解决模板语法冗余问题。侦听器侦听data中某一个数据变化

    1. 计算属性擅长处理的场景是：多个数据影响一个数据

    2. watch擅长处理的场景是：一个数据执行，一个函数影响多个数据。

  2. 计算属性有缓存机制，侦听器没有缓存机制

  3. 侦听器支持异步操作，计算属性不支持异步操作（即使写了异步会先return再执行异步）

  4. 计算属性可以给vue新增属性，侦听器必须是data中已有属性

  5. 计算属性只要使用了就会立即执行一次，侦听器默认只有当数据第一次调用才会执行

  6. 侦听器可以通过设置immerdiate为true，也可以像计算属性一样立即执行一次

// computed形式
const { createApp } = Vue
const app = createApp({
    data() {
        return {
            firstName: 'su',
            lastName: 'mei'
          },
    }
    computed: {
        fullName () {
            return this.firstName + this.lastName;
        }
    }
})
​
// watch形式
const { createApp } = Vue
const app = createApp({
    data() {
        return {
            firstName: 'su',
            lastName: 'mei',
            fullName: 'sumei'
        }
    },
    watch: {//是不是麻烦一些
        firtName () {
            this.fullName = this.firstName + this.lastName; 
        },
        lastName () {
            this.fullName = this.firstName + this.lastName;
        }
    }
})

watch 只能监听data中的数据变化吗？

watch可以监听路由中的数据的变化

案例：图书购物车

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <style>
        .app .table,
        .app .totalPrice {
            width: 800px;
            margin: 20px auto;
            padding: 20px;
        }
    </style>
</head>
​
<body>
    <div id="app">
        <div v-if="books.length">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th></th>
                        <th>书籍名称</th>
                        <th>出版日期</th>
                        <th>书本价格</th>
                        <th>购买数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in books" :key='index'>
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.date}}</td>
                        <!-- <td>{{getFinallPrice(item.price)}}</td> -->
                        <td>{{item.price}}</td>
                        <td>
                            <button type="button" class="btn btn-default" @click="decrement(index)"
                                :disabled="item.count <=1">-</button>
                            <label>{{item.count}}</label>
                            <button type="button" class="btn btn-default" @click="increment(index)">+</button>
                        </td>
                        <td><button type="button" class="btn btn-warning" @click="removeClick(index)">移除</button></td>
                    </tr>
                </tbody>
            </table>
            <h2 class="totalPrice">总价格：{{totalPrice}}</h2>
        </div>
        <h2 class="totalPrice" v-else>购物车为空！</h2>
    </div>
    <script src='https://unpkg.com/vue@3/dist/vue.global.js'></script>
    <script>
        const { createApp } = Vue
        const app = createApp({
            data() {
                return {
                    books: [
                        { id: 1001, name: '计算机操作原理', date: '2020-02-12', price: 108, count: 1 },
                        { id: 1002, name: 'JavaScript高级程序设计', date: '2020-02-12', price: 99, count: 1 },
                        { id: 1003, name: '计算机网络', date: '2020-02-12', price: 28, count: 1 },
                        { id: 1004, name: '数据结构', date: '2020-02-12', price: 46, count: 1 },
                        { id: 1005, name: 'C语言', date: '2020-02-12', price: 48, count: 1 }
                    ]
                }
            },
            methods: {
                // 普通方法处理价格
                getFinallPrice(price) {
                    return '￥' + price.toFixed(2)
                },
                increment(index) {
                    this.books[index].count++
                },
                decrement(index) {
                    this.books[index].count--
                },
                removeClick(index) {
                    this.books.splice(index, 1)
                },
            },
            computed: {
                totalPrice() {
                    let totalPrice = 0
                    // 方式一：普通for
                    // 方式二：for (let item of ...)
                    /* for (let item of this.books) {
                        totalPrice += item.price * item.count
                    } */
                    // 方式三：高阶函数reduce：汇总数组内的元素
                    this.books.reduce(function (preValue, book) {
                        totalPrice += book.price * book.count
                    }, 0)
                    return totalPrice
                }
            }
        })
        app.mount('#app')
    </script>
</body>
</html>

2.6 Vue 的生命周期

学习：常见的8个生命周期钩子函数

vue2生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM，在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，目的是给予用户在一些特定的场景下添加他们自己代码的机会。

Vue生命周期的主要阶段：4个before， 4个ed，创建，装载，更新，销毁

  • 挂载（初始化相关属性）

    • beforeCreate ---- 备孕

      注意点：在此时不能获取data中的数据，也就是说 this.msg 得到的是

    • created ---- 怀上了

    • beforeMount ---- 怀胎十月

    • mounted【页面加载完毕的时候就是此时】 ---- 生下来了

      注意点：默认情况下，在组件的生命周期中只会触发一次

  • 更新（元素或组件的变更操作）

    • beforeUpdate

    • updated

      注意点：可以重复触发的

  • 销毁（销毁相关属性）

    • beforeDestroy --- game over前

    • destroyed --- game over

销毁（手动）使用 this.$destroy()

关于8个生命周期涉及到的方法，可以参考Vue官网API：

vue3生命周期

选项式API中将 beforeDestroy 以及 destroyed 修改为 beforeUnmount 和 unmounted，其余一致

生命周期钩子 | Vue.js

如果是vue2的生命周期钩子函数

完整案例： 16_lifeCycle_vue2.html 官方解释

<!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>13_vue2的v-if与v-for优先级</title>
</head>
<body>
  <div id="app">
    {{ count }}
    <button @click="add">加1</button>
  </div>
</body>
<script src="lib/vue.js"></script>
<script>
  new Vue({
    data: {
      count: 10
    },
    methods: {
      add () {
        this.count++
        if (this.count === 15) {
          this.$destroy()
        }
      }
    },
    beforeCreate () {
      console.log('beforeCreate')
    },
    created () {
      // 有的人在此处请求数据，修改状态 ---- 不太建议 （请求数据-教育 - 胎教）
      console.log('created')
    },
    beforeMount () {
      console.log('beforeMount')
    },
    mounted () {
      // 在此处请求数据 - （请求数据-教育 - 早教）
      // DOM操作 （揍）
      // 实例化 new Swiper('.container', {})
      // 计时器，延时器等 （年龄从生下来才开始计算）
      // 订阅
      console.log('mounted')
    },
    beforeUpdate () {
      console.log('beforeUpdate')
    },
    updated () {
      // DOM操作 
      // 实例化
      // 不要请求数据 - 死循环
      console.log('updated')
    },
    beforeDestroy () {
      // 消除定时器，延时器，取消订阅
      console.log('beforeDestroy')
    },
    destroyed () {
      console.log('destroyed')
    }
  }).$mount('#app')
  
</script>
</html>

15_lifeCycle_vue3.html文章来源地址https://www.toymoban.com/news/detail-813981.html

<!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>17_vue3生命周期</title>
</head>
<body>
  <div id="app">
    {{ count }}
    <button @click="add">加1</button>
  </div>
</body>
<script src="lib/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data () {
      return {
        count: 10
      }
    },
    methods: {
      add () {
        this.count++
        if (this.count === 15) {
          app.unmount()
        }
      }
    },
    beforeCreate () {
      console.log('beforeCreate')
    },
    created () {
      // 有的人在此处请求数据，修改状态 ---- 不太建议 （请求数据-教育 - 胎教）
      console.log('created')
    },
    beforeMount () {
      console.log('beforeMount')
    },
    mounted () {
      // 在此处请求数据 - （请求数据-教育 - 早教）
      // DOM操作 （揍）
      // 实例化 new Swiper('.container', {})
      // 计时器，延时器等 （年龄从生下来才开始计算）
      // 订阅
      console.log('mounted')
    },
    beforeUpdate () {
      console.log('beforeUpdate')
    },
    updated () {
      // DOM操作 
      // 实例化
      // 不要请求数据 - 死循环
      console.log('updated')
    },
    beforeUnmount () {
      // 消除定时器，延时器，取消订阅
      console.log('beforeUnmount')
    },
    unmounted () {
      console.log('unmounted')
    }
  })
  
  app.mount('#app')
</script>
</html>

到了这里，关于vue基本知识：methods，computed，watch，生命周期的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 【知识积累】Edge vs Fog Computing 边缘计算和雾计算的基本介绍

    【知识积累】Edge vs Fog Computing 边缘计算和雾计算的基本介绍

    边缘计算和雾计算都可以被定义为技术平台，使计算过程更接近数据产生和收集的地方，以下详细解释了这两个概念。 顾名思义，边缘计算发生在应用网络的“边缘”。从拓扑结构上看，“边缘计算机”在网络的端点上（如控制器和传感器）或者在这些端点的旁边。在这些端

    2023年04月08日
    浏览(35)

  • watch computed 和 method

    在Vue中， watch 、 computed 和 methods 是三种不同的属性，用于处理不同的场景和需求。 watch ： watch 用于监听数据的变化并执行相应的操作。当被监听的数据发生变化时，会触发相应的回调函数。 watch 适用于需要在数据变化时执行异步或复杂的操作，或者需要监听多个数据的变

    2024年02月11日
    浏览(51)
  • Vue3基本知识点

    Vue3基本知识点

    为什么要学vue3 1、Vue是国内 最火的前端框架 2、Vue3是2020年09月18日正式发布的 目前以支持Vue3的UI组件库 库名称 简介 ant-design-vue PC 端组件库：Ant Design 的 Vue 实现，开发和服务于企业级后台产品 arco-design-vue PC 端组件库：字节跳动出品的企业级设计系统 element-plus PC 端组件库：

    2024年02月02日
    浏览(47)
  • SpringBoot + Vue基本知识点荟萃

    SpringBoot + Vue基本知识点荟萃

    Maven是一个项目管理工具，可以对Java项目进行自动化的构建和依赖管理 项目构建：提供标准的，跨平台的自动化构建项目的方式 依赖管理：方便快捷的管理项目依赖的资源（jar包），避免资源间的版本冲突等问题 统一开发结构：提供标准的，统一的项目开发结构，如下图所

    2023年04月17日
    浏览(52)

  • 学习Vue:computed VS watch

    在 Vue.js 中，Vue 实例与数据绑定不仅限于简单的插值表达式和指令。在实际开发中，您可能会遇到更复杂的数据处理需求。为此，Vue 提供了计算属性和侦听器这两个强大的工具，让您能够更灵活地处理和响应数据变化。 计算属性是 Vue 实例中的一个特殊属性，它允许您定义一

    2024年02月12日
    浏览(68)

  • Vue 中的 computed 和 watch 的区别

    在Vue.js中， computed 和 watch 是两个常用的属性，用于处理数据的监听和响应。它们在功能上有一些相似之处，但也有一些重要的区别。本文将介绍 computed 和 watch 的区别，并提供相关的代码示例。 Vue 中的 computed 和 watch 都是用来观察数据变化的，但它们的用途和特点略有不同

    2024年02月07日
    浏览(47)
  • Vue3的computed和watch

    Vue3的computed和watch

    目录 1、computed 2、computed完整写法  3、watch 4、watch监听对象具体属性 5、watch 监听reactive数据 1、computed 基于现有的数据计算出新的数据 2、computed完整写法   3、watch 1 . 侦听一个数据 第一个参数：监听的数据 第二个回调函数 2.侦听多个数据 第一个参数监听的数据构成的数组

    2024年01月24日
    浏览(39)

  • 浅谈Vue的属性，computed和watch

    是什么？ 直接上demo，了解一下语法先~ conputed是 计算 属性，watch是 监听 属性，本质上都是同一个 watcher实例 ，它们都是 通过响应式系统与数据，页面建立通信 。 computed带有 \\\"懒计算\\\" 功能 监听的逻辑有差异 ：computed是依赖的值变了，它去重新求值，watch是目标值变了，它去

    2024年01月18日
    浏览(43)
  • vue3 computed 和 watch 的差异

    vue3 computed 和 watch 的差异

    🙂博主：锅盖哒 🙂文章核心： vue3 computed 和 watch 的差异 目录 前言 用法 computed watch 代码 理解 高质量的使用 Vue.js作为一种现代化的前端框架，提供了丰富的特性来帮助开发者构建高效和响应式的用户界面。在这其中， computed 和 watch 是两个非常重要的选项，它们都用于处理

    2024年02月08日
    浏览(46)

  • Vue3学习——computed、watch、watchEffect

    与Vue2.x中computed配置功能一致 写法 注意 监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）。 监视reactive定义的响应式数据中的某个属性时：deep配置有效。 情况一：监视ref定义的响应式数据 监视ref定义的对象，改变某一个属性时，

    2024年02月22日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包