VUE框架VM对象数据更新阶段和解绑或称销毁阶段详解------VUE框架

已于 2023-12-04 00:29:35 修改
阅读量960 收藏 21
点赞数 18
分类专栏： # VUE框架 前端 文章标签： vue.js javascript ecmascript vue 前端 前端框架 js
于 2023-12-03 15:43:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75960169/article/details/134765721
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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">
        <h1>{{msg}}:{{count}}</h1>
        <button @click="add()">按一下加一</button>
        <button @click="destroy()">按下销毁VM</button>
        <h1 v-text="count"></h1>
    </div>
    <script>
        // 初始阶段,挂载阶段,更新阶段,销毁阶段
        // 一共是四个阶段,八个钩子函数
        // 初始阶段beforeCreate创建前,created创建后
        // 挂载阶段beforeMount挂载前,mounted挂载后
        // 更新阶段beforeUpdate更新前,updated更新后
        // 销毁阶段beforeDestroy销毁前,destroyed销毁后
        const vm = new Vue({
            el : "#app",
            data : {
                msg : "Hello",
                count : 1
            },
            methods : {
                add()
                {
                    // 高版本的VUE会将所有的事件监听器移除,包括自带的事件监听器在内
                    console.log("add");
                    this.count++;
                },
                destroy()
                {
                    this.$destroy();
                }
            },
            watch : {
                count()
                {
                    // 销毁以后,就不能监视了
                    console.log("监视一次");
                }
            },
            // 整个过程的实现
            // new Vue(),VM实例就出现了
            // vm对象在这里创建
            // 事件对象&生命周期产生了
            // 初始阶段,虚拟dom生成
            beforeCreate(){
                console.log("VUE对象初始化了");
                // beforeCreate阶段还没实现数据代理和数据监测
                // 所以根本访问不到我们的代理数据
                console.log(this.count);
            },
            // 数据代理和数据监测的创建
            created(){
                console.log("created");
                // 这里就可以访问到我们的代理数据了
                console.log(this.count);
                console.log(this.$el);
                console.log(this.$el instanceof HTMLElement);
            },
            // 初始阶段,el有,template也有,最终编译template模板语句
            // el有,template没有,最终编译el模板语句
            // el没有的时候,需要手动调用$mount来进行手动挂载,流程才能继续
            // 如果el没有,也没有template,最终编译el模板语句
            // 结论是流程需要继续,el必须存在
            // el和template同时存在,优先选择template,如果没有template,才会选择el
            // 挂载阶段,真实dom生成
            beforeMount(){
                console.log(this.$el);
                console.log(this.$el instanceof HTMLElement);
                console.log("beforeMount");
            },
            // 数据代理和检测创建时期和挂载时期在页面展示上没区别,在内存中有区别
            // 页面上他们都显示大胡子,因为数据还没有实现挂载的
            // 在beforeMount时期操作页面元素不会生效,因为还没有和页面元素产生挂载
            // 也就是所谓的没有生成实际的dom树
            // 我们现在的所谓修改也就是内存上修改而已
            mounted(){
                // 挂载是通过创建一个$el并用它取代了页面上的el
                // mounted处真实的dom也就生成了
                console.log(this.$el);
                console.log(this.$el instanceof HTMLElement);
                console.log("mounted");
                // 此处已经挂载完了,已经覆盖掉我们页面上的元素了
                // 所以这里的修改会保留到我们的页面上
                // 走到此处,页面的初次渲染就已经做完了,等待和用户的交互了
                // 在这前面都没有diff算法,和新旧虚拟dom比较这种说法
            },
            // 更新阶段,data发生变化重新渲染
            beforeUpdate(){
                // 数据data已经发生变化,但是仅是内存中的数据变动了
                // 实际的dom还没有发生变化
                console.log("VUE对象的data更新了");
                // 内存的值已经变化了,页面上的实际dom没有变化
            },
            // 在这里dom会借diff算法比对重新渲染和修补,如何到updated
            updated()
            {
                console.log("updated");
                // 到这里的时候,内存的虚拟dom和页面上的实际dom数值一致
            },
            // 销毁阶段,卸载所有,销毁vm
            beforeDestroy(){
                // 销毁前尽管也有绑定关系,但是监视器在内的已经完全失效了
                this.count = 1000;
                // 监视器没有作用了已经,页面也不会刷新了
                // 只有内存中的数据变化了,实际dom没区别
                console.log("VM对象销毁了");
                console.log(this);
            },
            // VM销毁了以后,VM对象其实还是存在于内存中的
            // 只是将VM的监视器,子组件,自定义事件监听器等解绑了(卸载)
            // 只要不关闭浏览器,VM对象就还在内存里面
            // 因此,我们也可以称之为解绑前和解绑后更为精准
            destroyed()
            {
                console.log("destroyed");
                console.log(this);
            }
            // 销毁以后指令也失灵了
        });
    </script>
</body>
</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <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">

        <h1>{{msg}}:{{count}}</h1>

        <button @click="add()">按一下加一</button>

        <button @click="destroy()">按下销毁VM</button>

        <h1 v-text="count"></h1>

    </div>

    <script>

        // 初始阶段,挂载阶段,更新阶段,销毁阶段

        // 一共是四个阶段,八个钩子函数

        // 初始阶段beforeCreate创建前,created创建后

        // 挂载阶段beforeMount挂载前,mounted挂载后

        // 更新阶段beforeUpdate更新前,updated更新后

        // 销毁阶段beforeDestroy销毁前,destroyed销毁后

        const vm = new Vue({

            el : "#app",

            data : {

                msg : "Hello",

                count : 1

            },

            methods : {

                add()

                {

                    // 高版本的VUE会将所有的事件监听器移除,包括自带的事件监听器在内

                    console.log("add");

                    this.count++;

                },

                destroy()

                {

                    this.$destroy();

                }

            },

            watch : {

                count()

                {

                    // 销毁以后,就不能监视了

                    console.log("监视一次");

                }

            },

            // 整个过程的实现

            // new Vue(),VM实例就出现了

            // vm对象在这里创建

            // 事件对象&生命周期产生了

            // 初始阶段,虚拟dom生成

            beforeCreate(){

                console.log("VUE对象初始化了");

                // beforeCreate阶段还没实现数据代理和数据监测

                // 所以根本访问不到我们的代理数据

                console.log(this.count);

            },

            // 数据代理和数据监测的创建

            created(){

                console.log("created");

                // 这里就可以访问到我们的代理数据了

                console.log(this.count);

                console.log(this.$el);

                console.log(this.$el instanceof HTMLElement);

            },

            // 初始阶段,el有,template也有,最终编译template模板语句

            // el有,template没有,最终编译el模板语句

            // el没有的时候,需要手动调用$mount来进行手动挂载,流程才能继续

            // 如果el没有,也没有template,最终编译el模板语句

            // 结论是流程需要继续,el必须存在

            // el和template同时存在,优先选择template,如果没有template,才会选择el

            // 挂载阶段,真实dom生成

            beforeMount(){

                console.log(this.$el);

                console.log(this.$el instanceof HTMLElement);

                console.log("beforeMount");

            },

            // 数据代理和检测创建时期和挂载时期在页面展示上没区别,在内存中有区别

            // 页面上他们都显示大胡子,因为数据还没有实现挂载的

            // 在beforeMount时期操作页面元素不会生效,因为还没有和页面元素产生挂载

            // 也就是所谓的没有生成实际的dom树

            // 我们现在的所谓修改也就是内存上修改而已

            mounted(){

                // 挂载是通过创建一个$el并用它取代了页面上的el

                // mounted处真实的dom也就生成了

                console.log(this.$el);

                console.log(this.$el instanceof HTMLElement);

                console.log("mounted");

                // 此处已经挂载完了,已经覆盖掉我们页面上的元素了

                // 所以这里的修改会保留到我们的页面上

                // 走到此处,页面的初次渲染就已经做完了,等待和用户的交互了

                // 在这前面都没有diff算法,和新旧虚拟dom比较这种说法

            },

            // 更新阶段,data发生变化重新渲染

            beforeUpdate(){

                // 数据data已经发生变化,但是仅是内存中的数据变动了

                // 实际的dom还没有发生变化

                console.log("VUE对象的data更新了");

                // 内存的值已经变化了,页面上的实际dom没有变化

            },

            // 在这里dom会借diff算法比对重新渲染和修补,如何到updated

            updated()

            {

                console.log("updated");

                // 到这里的时候,内存的虚拟dom和页面上的实际dom数值一致

            },

            // 销毁阶段,卸载所有,销毁vm

            beforeDestroy(){

                // 销毁前尽管也有绑定关系,但是监视器在内的已经完全失效了

                this.count = 1000;

                // 监视器没有作用了已经,页面也不会刷新了

                // 只有内存中的数据变化了,实际dom没区别

                console.log("VM对象销毁了");

                console.log(this);

            },

            // VM销毁了以后,VM对象其实还是存在于内存中的

            // 只是将VM的监视器,子组件,自定义事件监听器等解绑了(卸载)

            // 只要不关闭浏览器,VM对象就还在内存里面

            // 因此,我们也可以称之为解绑前和解绑后更为精准

            destroyed()

            {

                console.log("destroyed");

                console.log(this);

            }

            // 销毁以后指令也失灵了

        });

    </script>

</body>

</html>

旧约Alatus
关注
  • 18
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue更新数组和对象的方法
laoluobo76的博客
09-26 5870
1、更新数组中元素值：vue.set(this.对象,下标,新值) 由于 JavaScript 的限制，利用索引直接修改数组元素时，Vue 不能检测数组的变动： 正确的方法： Vue.set(vm.items, indexOfItem, newValue) vm.items.splice(indexOfItem, 1, newValue) vm.$set(vm.items, indexOfItem, newValue) vm即this <div id="app">
解决vue中对象属性改变视图不更新的问题
08-27
下面小编就为大家分享一篇解决vue中对象属性改变视图不更新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 更新对象
Web前端工程师
06-02 269
this.$set(this.detailVo,0);
别再用obj.prop = value了，快来学会这些神奇的方法，让Vue.js响应式更新你的对象属性！
xxxzzzqqq_的博客
03-06 1412
如果想在整个Vue项目中快速调用这个方法，可以将其定义为全局方法。在Vue.js中，可以使用属性来定义全局方法或属性。这样，就可以在所有的Vue实例中访问这个方法或属性。下面是将if (!return;} else {复制代码在这段代码中，使用来定义一个名为的全局方法，该方法与之前定义的方法相同。这样，就可以在Vue组件中使用方法来更新对象的属性。复制代码或者复制代码其中，表示全局方法，this.obj表示要更新的对象，'prop'表示要修改或添加的属性名，this.arr。
Vue.js 强制更新数组和对象,刷新赋值
Harry Blog
04-27 2622
// 数组 this.$set(this.items, 1, {attribute1:1}) // 对象 this.obj=Object.assign({},this.obj,{newObjAttr:1}))
创建和销毁对象
href_2007的博客
02-14 69
第1条：考虑用静态工厂方法代替构造函数 好处： 1。静态工厂方法的第一个好处是，与构造函数不同，静态方法具有名字 2.静态工厂方法的第二个好处是与构造函数不同，它们每次被调用的时候，不要求非得创建一个新的对象 3.静态工厂方法的第三个好处是与构造函数不同，它们可以返回一个原返回类型的子类型的对象。这样我们在选择返回对象的类型时就有了更大的灵活性。 缺点 1.静态工厂方法的主要缺点是...
vue-element-admin框架源代码
09-10
vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18n 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助...
element-ul框架（vue-admin-template），依赖包已经装完
03-08
在vue-admin-template中，通常用于与后端API进行数据交互，如登录验证、数据获取、表单提交等。 6. **Webpack**: Webpack是一个现代JavaScript应用的静态模块打包工具。在vue-admin-template中，Webpack负责处理...
web前端VUE框架-基础知识及核心原理
01-27
例如，通过 `vm.arr.push()` 或 `vm.$set()` 可以修改数组和对象，使得视图与数据保持同步。 Vue 使用模板语法，其中 `{{ }}`（mustache）用来插入变量，而 `v-bind` 和 `v-on` 分别用于绑定属性和事件。Vue 还提供...
Vue应用框架整合与实战--框架整合(通用)篇
03-01
使用Vue.js，我们已经可以通过组合组件来组成应用程序，当你要把vue-router添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉vue-router在哪里渲染它们。如果在一个模块化工程中使用它，...
问题：vue2修改对象属性值，数据改变，但是页面视图不更新
最新发布
qq_44792224的博客
11-22 4264
v-if不要绑定数组元素，无效，数组元素内容的变化无法响应v-if绑定对象属性 {1: true, 2: false}，如果提前写死，v-if绑定其中一个属性，则可以生效v-if如果对象的属性数量不定，是通过某方法的触发去改变对象的属性数量。需要使用$set()//增改都适用this.$set(this.对象名， 属性名， 新值)//不可以使用下面的方法更新this.对象.属性 = 新值//或者this.对象[属性] = 值只要所有修改或者增加属性的语句都使用，就能解决v-if。
vue中this.$set()的用法----更新数组和对象的值
m0_67391521的博客
03-06 2万+
我们先看看官网给出的解释： 1、更新数组: 我们有一个数组，包括人员姓名和人员年龄两个属性。 想要实现在页面刚加载的时候改变姓名为李四的人的信息。 首先我们想到的是在mouted函数中直接修改name为李四的人的信息 this.itemList[1] = { name: '李思思', age: 30 } console.log(this.itemList[1]); 但是这时候控制台打印的数据更新了，但是页面视图却没有更新。这时候我们就需要用到this.$set
Vue.js 组件销毁有几种情况？
千锋教育
03-06 7557
显式销毁：在组件实例上调用 $destroy() 方法可以显式销毁一个组件实例，它会解除所有的绑定并移除 DOM 中的元素。在组件销毁时，Vue.js 会自动执行一些生命周期钩子函数，包括 beforeDestroy() 和 destroyed()。路由切换：当使用 Vue.js 路由切换时，旧的组件实例会被销毁，新的组件实例会被创建并挂载到 DOM 中。条件渲染：当一个组件通过 v-if 或 v-show 指令被移除时，它会被销毁。父组件销毁：当一个父组件被销毁时，它的所有子组件也会被销毁。
Vue之Vue.set动态新增对象属性
热门推荐
tian361zyc的博客
06-08 2万+
Vue
Vue 数组和对象更新后页面 DOM (二)
starleejay的博客
07-24 634
上篇文章Vue 数组和对象更新后页面 DOM 不更新问题的解决方法。能够解决很多页面数据响应的问题，但是最近在项目中发现在某些情况下上篇文章的解决方式并不是针对任何问题的。 假设数据结构是下面的情况： polist:{ ..., list:{ itemlist:[ {a:1}, {a:2} ] ...
Vue对象的选项
肖肖肖丽珠的博客
07-20 1650
var vm = new Vue({ // 数据 data: "声明需要响应式绑定的数据对象", props: "接收来自父组件的数据", propsData: "创建实例时手动传递props，方便测试props", computed: "计算属性", methods: "定义可以通过vm对象访问的方法", watch: "Vue实例化时会调用$watch()方法遍历.
vue之组件销毁
seimeii的博客
09-26 1万+
组件销毁有很多种情况 比如页面关闭，路由跳转（没有使用keep-alive时的路由切换） 还可以使用v-if和改变key值来销毁组件，这属于手动销毁组件 代码：<v-detection :detectionid="detectionid" v-if="hackReset"></v-detection> 声明hackReset，利用true或者false实现重建或者销毁 代码： this.hackReset = false;//销毁组件 this.$nex
Vue 对象和数据的强制更新
yiyueqinghui的博客
01-09 4828
数组更新 以下支持自动更新 push() //向后添加 pop() //删除最后一个 shift() //删除第一个 unshift() //向第一个添加元素 splice() //向指定位置添加/删除元素 sort() //用原地算法对数组的元素进行排序 reverse() //将数组中元素的位置颠倒 注意，这种形式修改数据 this....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值