网站链接: 我爱捣鼓
当前位置: 首页 > 前端开发 > Vue

vue updated钩子用法

2023/3/5 21:00:16

vue钩子函数update一般是数据修改时执行,由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用updated钩子函数。 无论是组件本身的数据变更,还是从父组件接收到的 props 或者从vuex里面拿到的数据有变更,都会触发虚拟 DOM 重新渲染和打补丁,并在之后…

        vue钩子函数update一般是数据修改时执行,由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用updated钩子函数。

        无论是组件本身的数据变更,还是从父组件接收到的 props 或者从vuex里面拿到的数据有变更,都会触发虚拟 DOM 重新渲染和打补丁,并在之后调用 updated。

<!DOCTYPE html>
<html>
<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>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2 v-color="oRed">{{msg}}</h2>
        <button @click="changeMsg()">修改msg</button>
    </div>
</body>
<script>
    //定义全局指令v-color
    Vue.directive("color", {
        //钩子函数bind--自定义指令
        bind: function(el, args) {
            el.style.color = args.value;
        },
        //钩子函数inserted--自定义指令
        inserted: function(el) {
            console.log("inserted");
        },
        //钩子函数update--数据修改时执行
        update: function(el) {
            console.log("修改数据时执行了update钩子函数");
        },
        //钩子函数componentUpdated--数据修改完执行
        componentUpdated: function(el) {
            console.log("数据修改完执行了componentUpdated钩子函数");
        },
        //钩子函数unbind--只调用一次,指令与元素解绑时调用
        unbind: function() {
            console.log("元素与指令解绑后调用unbind钩子函数");
        }
        //销毁见下方↓
    });
    //实例化一个Vue对象
    let vm = new Vue({
        el: "#app",
        data: {
            msg: "八个",
            oRed: "red"
        },
        methods: {
            changeMsg() {
                this.msg = "msg被修改了";
            }
        }
    })
    //销毁实例
    //销毁后数据不能再修改
    vm.$destroy();
</script>
</html>

  • 什么时候进updated方法?

        只有事先设置好的data变量如arrData改变并且要在页面重新渲染{{ arrData }}完成之后,才会进updated方法,只改变arrData但不渲染页面是不会进的.

        通过以上内容我们知道了vue updated钩子用法。感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容,希望对大家有所帮助!引用本文内容时,请注明出处!谢谢合作!

相关资讯

  • vue兄弟平级组件如何传递参数值?

    vue组件传值不外乎三种,父传子、子传父、平级,今天我们就来着重说说vue平级组件如何传递参数值? 假设你有两个Vue组件需要通信: A 和 B ,A组件按钮上面绑定了点击事件,发送一则消息,B组件接收。初始化,全局创建$bus 直接在项目中的 main.js 初始化 …

    2023/1/7 13:08:32