onMounted的用法

最新推荐文章于 2024-03-20 12:07:11 发布
最新推荐文章于 2024-03-20 12:07:11 发布
阅读量1.3w 收藏
点赞数
分类专栏： JavaScript vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40945354/article/details/119802915
版权
vue 同时被 2 个专栏收录
722 篇文章 4 订阅
订阅专栏
JavaScript
628 篇文章 6 订阅
订阅专栏 
<!DOCTYPE html>
<div id="app">
  <parent></parent>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const {provide, inject, ref, onMounted} = Vue;
    const app = Vue.createdApp({});

    const msgKey = Symbol();
    const helloKey = Symbol();

    app.component('parent', {
        setup() {
          const msg = ref('Java无难事');
          const sayHello = function (name) {
               console.log("Hello, " + name)
          }

          provide(msgKey, msg);
          provide(helloKey, sayHello);
          return {
            msg
          }
        },
        template: '<child/>'
    })

    app.component('child', {
      setup(){
        const message = inject(msgKey, ref('VC++ 深入详解'));
        const hello = inject(helloKey);
        onMounted(() => hello('zhangsan'));

        return {
          message
        }
      },
      template: '<p>{{ message }}</p>'
    })
    
    app.mount('#app')

</script>


</html>

也不行

<!DOCTYPE html>
<div id="app">
  
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const {provide, inject, ref, onMounted} = Vue;
    const app = Vue.createdApp({});

    const msgKey = Symbol();
    const helloKey = Symbol();

    app.component('parent', {
        setup() {
          const msg = ref('Java无难事');
          const sayHello = function (name) {
               console.log("Hello, " + name)
          }

          provide(msgKey, msg);
          provide(helloKey, sayHello);
          return {
            msg
          }
        },
        template: '<child/>'
    })

    app.component('child', {
      setup(){
        const message = inject(msgKey, ref('VC++ 深入详解'));
        const hello = inject(helloKey);
        onMounted(() => hello('zhangsan'));

        return {
          message
        }
      },
      template: '<p>{{ message }}</p>'
    })

    const vm = app.mount('#app')

</script>


</html>

多谢了一个d，改好了

<!DOCTYPE html>
<div id="app">
  <parent></parent>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
    const {provide, inject, ref, onMounted} = Vue;
    const app = Vue.createApp({});

    const msgKey = Symbol();
    const helloKey = Symbol();

    app.component('parent', {
        setup() {
          const msg = ref('Java无难事');
          const sayHello = function(name) {
               console.log("Hello, " + name)
          }

          provide(msgKey, msg);
          provide(helloKey, sayHello);
          return {
            msg
          }
        },
        template: '<child/>'
    })

    app.component('child', {
      setup(){
        const message = inject(msgKey, ref('VC++ 深入详解'));
        const hello = inject(helloKey);
        onMounted(() => hello('zhangsan'));

        return {
          message
        }
      },
      template: '<p>{{ message }}</p>'
    })

    const vm = app.mount('#app')

</script>


</html>

加了点料
name也显示一下

<!DOCTYPE html>
<div id="app">
  <parent></parent>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
    const {provide, inject, ref, onMounted} = Vue;
    const app = Vue.createApp({});

    const msgKey = Symbol();
    const helloKey = Symbol();

    app.component('parent', {
        setup() {
          const msg = ref('Java无难事');
          const sayHello = function(name) {
               console.log("Hello, " + name)
          }

          provide(msgKey, msg);
          provide(helloKey, sayHello);
          return {
            msg
          }
        },
        template: '<child/>'
    })

    app.component('child', {
      setup(){
        const message = inject(msgKey, ref('VC++ 深入详解'));
        const hello = inject(helloKey);
        onMounted(() => hello('zhangsan'));

        return {
          message,
          name
        }
      },
      template: `<p>{{ message }}</p>
                 <p>Hello, {{ name }} </p>`
    })

    const vm = app.mount('#app')

</script>


</html>

又乱了

<!DOCTYPE html>
<div id="app">
  <parent></parent>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
    const {provide, inject, ref, onMounted} = Vue;
    const app = Vue.createApp({});

    const msgKey = Symbol();
    const helloKey = Symbol();

    app.component('parent', {
        setup() {
          const msg = ref('Java无难事');
          const sayHello = function(name) {
               console.log("Hello, " + name)
          }

          provide(msgKey, msg);
          provide(helloKey, sayHello);
          return {
            msg
          }
        },
        template: '<child/>'
    })

    app.component('child', {
      setup(){
        const message = inject(msgKey, ref('VC++ 深入详解'));
        const hello = inject(helloKey);
        onMounted(() => hello('zhangsan'));

        return {
          message,
          hello
        }
      },
      template: `<p>{{ message }}</p>
                 <p>Hello, {{ name }} </p>`
    })

    const vm = app.mount('#app')

</script>


</html>

为什么在console窗口里改vm VC++这个，window窗口里不改，只有console里改了。

<!DOCTYPE html>
<div id="app">
  <parent></parent>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
    const {provide, inject, ref, onMounted} = Vue;
    const app = Vue.createApp({});

    const msgKey = Symbol();
    const helloKey = Symbol();

    app.component('parent', {
        setup() {
          const msg = ref('Java无难事');
          const sayHello = function(name) {
               console.log("Hello, " + name)
          }

          provide(msgKey, msg);
          provide(helloKey, sayHello);
          return {
            msg
          }
        },
        template: '<child/>'
    })

    app.component('child', {
      setup(){
        const message = inject(msgKey, ref('VC++ 深入详解'));
        const hello = inject(helloKey);
        onMounted(() => hello('zhangsan'));

        return {
          message
        }
      },
      template: '<p>{{ message }}</p>'
    })

    const vm = app.mount('#app')

</script>


</html>
hamimelon2020
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决vue页面渲染但dom没渲染的操作
10-15
主要介绍了解决vue页面渲染但dom没渲染的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
JS中async/await实现异步调用的方法
12-10
async/await多个函数关联调用 ...await只能在async函数中使用，后面跟一个promise对象 所以在模拟异步调用函数时，函数体内返回promise async/await缺点 async函数里，无论是Promise reject的数据还是逻辑报错，
【vue3】四、onMounted、onCreated等使用
热门推荐
qq_39323073的博客
10-21 6万+
创建文件useMouse.js 从vue模块引入onMounted，ref 在onMounted中定义方法 import {onMounted, ref} from 'vue' export default function useMouse() { let x = ref(0) let y = ref(0) onMounted(() => { window.addEventListener('mousemove', e => { x.value = e.pageX .
解决vue页面DOM操作不生效的问题
11-28
现象： 使用Element UI渲染了一个树形结构，设计在鼠标移入每个节点是显示其中的操作按钮，效果如下： 下面是出错部分： 在新增节点后移入新增节点附近(图中是移入一级2)，功能按钮的显示位置出现偏移 原因查找： 经过调试发现是在新增节点后，执行DOM操作获取节点时，取到的仍是之前的结构，新增的节点并未获取到。 原因分析： 猜测是vue使用的虚拟DOM，使得页面虽然已经渲染出来，但在Vue实例中让处在在虚拟DOM中，无法获取。 解决方法： 使用Vue.nextTick，看下官方材料： ‘在下次 DOM 更新循环结束之后执行延迟回调’，这句话不是特别理解，不过可以看出DOM更新是一个循环
Vue 3 里的 onMounted 怎么用？
最新发布
Becomin' Charles
03-20 2984
本文介绍了一个小迷惑，onMounted 和在代码里直接调用的区别，以及什么时候该使用 onMounted。
Vue修炼系列教程 - 筑基篇5
hhzzcc_的博客
02-21 740
上一章主要讲了vue主要的生命周期mounted和Unmounted以及常用修饰符stop和prevent的场景使用，今天主要学习vue中ref(这里的ref和之前讲的使普通变量变成响应式变量不是同一个东西)的使用，以及v-model的使用
vue2.0的基本使用
任性的wo的博客
03-21 410
1.Vue基础知识 指令的使用： v-model 双向模型改变 v-text 文本渲染，渲染页面比较多 v-show 控制DOM的显示隐藏 v-if 控制DOM 判断 v-bind 绑定属性 v-for 循环，只要用于列表等 v-on 事件绑定 v-model:主要是在表单里面使用。比如文本框、下拉框、单选、复选、textarea。v-model是一个双向的功能。文本框输入以后，模
【Vue】如何在onMounted钩子中使用data中的数据
YIZHILIUSHA2020的博客
10-03 1万+
前景提要：onMounted钩子是vue3新添加的特性，属于组合式api，在setup中调用，而setup相当于组件编译的入口，setup在beforeCreate钩子执行前运行，此时只初始化了prop（属性）和context等，而data是在beforeCreate钩子之后created之前执行的。 注意：onMounted虽然写在setup函数中，但却是在组件挂载到父组件时才被调用的。 方法：由于setup中不能使用this，因此需要使用getCurrentInstance 方法获得当前活跃的组件，具体
vue生命周期函数
qq_49723651的博客
04-03 4141
vue生命周期函数 文章目录vue生命周期函数简介生命周期函数图示生命周期函数的使用 简介 生命周期函数也叫钩子函数，就是在某一条件下被自动触发的函数，它们和浏览器渲染过程挂钩。比如我想让某个网页一被加载出来就去向后端请求数据，不需要额外绑定一个监听事件，这个时候就可以使用生命周期函数。 vue3中更新了生命周期函数的使用方法：vue3官方文档 生命周期函数图示 下面演示了各个钩子函数的触发时间： vue2和vue3生命周期函数对照表： vue2 vue3 beforeCreate
vue2的Mounted和vue3的onMounted，这两个钩子有何不同？
杜永康的博客
06-13 1万+
钩子是通过 setup函数来使用的，它必须在组件实例创建之前调用，并返回一个对象，该对象包含组件实例中需要使用的数据、方法和生命周期钩子等。钩子中的函数会在组件挂载到 DOM 上之后执行，与 Vue 2 的 mounted 钩子相同，因此在该钩子中可以访问到组件的 DOM 元素。如果需要访问组件实例中的数据和方法，可以使用。钩子是在组件实例被挂载到 DOM 上之后才被调用的，因此在该钩子中可以访问到组件的 DOM 元素。钩子在组件的子组件被挂载之前被调用，因此如果需要在子组件中访问到父组件的数据，可以在。
【Vue】使用 onMounted 确保在组件挂载后执行异步操作
小秀的博客
06-27 5290
在该钩子函数中执行异步操作可以保证组件已经完全渲染，并且 DOM 元素已经存在，从而避免在组件还未挂载或尚未完全初始化时执行异步操作导致的问题。如果在这个阶段执行异步操作，可能无法获取到正确的 DOM 元素或执行预期的操作。钩子函数中，可以确保在组件已经挂载到 DOM 后执行异步操作，保证了组件已经完全初始化，并且相关的 DOM 元素和数据可用。如果在这个阶段执行异步操作，可能无法正确地获取或处理依赖项的数据。在上面的代码中，使用了 Vue 3 的 Composition API 中的。
VUE3-生命周期钩子《六》
故里2130
12-27 5698
生命周期的作用，页面加载的时候，主动执行某些程序。生命周期钩子有很多种，每一种都是有顺序的，如果不按照顺序执行的话，那么就不会触发某种效果，所以先要了解生命周期钩子函数的顺序。以下是官网提供的生命周期图示其中说2个主要使用的生命周期钩子，onMounted和onUpdated官网也有其他生命周期钩子介绍。
vue mounted 调用两次的完美解决办法
12-13
二 验证判断是否正确，不使用commit 方法，该用直接改变变量状态的方法，发现又加载了两次； 再次判断，不是由于commit引起的 三 猜想commit到底实现了什么逻辑，然后找到了v-if v-if会重新渲染页面，而mounted
vue 页面回退mounted函数不执行的解决方案
10-15
主要介绍了vue 页面回退mounted函数不执行的解决方案 ，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue3中reactive, onMounted, ref,toRaw,conmpted 使用方法
xiaoming4965的博客
10-09 950
vue3中 reactive ，ref ， toRaw，watch，conmpted 用法用法： const rowList = toRaw(row)ref和reactive都是Vue.js 3.x版本中新增的API，用于实现组件的数据响应式更新。1.：ref用于包装JavaScript基本类型的数据（如字符串、数字、布尔值等），而reactive可以用于包装JavaScript对象和数组等复杂类型的数据。2.
onMounted中使用async改为同步
竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生
12-01 2249
mounted改为同步执行
Vue3.0实现todolist之常用的生命周期onMounted
祈澈菇凉
09-28 4224
生命周期：一个组件从创建到销毁的过程 1：setup 不需要引入的生命周期：setup 代表组件创建的过程 可以直接在里面使用 2：onMounted import{ defineComponent, ref, onMounted } from "vue"; onMounted组件挂载的生命周期 比setup晚一些，是一个函数，里面传入回调函数 onMounted(() =>{ //组件挂...
VUE3中onMounted方法中如何更新data()中的数据
五角大寨
07-09 1万+
VUE3项目中，需求是页面加载后就有几个指标数据，希望在页面自动刷新，页面的数据希望做ajax更新。Vue 3 生命周期完整指南 https://segmentfault.com/a/1190000039680245?utm_source=tag-newestonmounted vue3_Vue3.x 生命周期 和 Composition API 核心语法理解 http://www.wityx.com/post/49199_1_1.html简而言之，这个更新的方法应该写在VUE组件的 setup() 中的o
Vue3中使用生命周期函数
林中明月间丶
03-30 4528
https://zhuanlan.zhihu.com/p/136417498 什么是Composition API 如果你还不知道，Vue3 Composition API 附带了一个setup()方法。此方法封装了我们的大多数组件代码，并处理了响应式，生命周期钩子函数等。 简而言之，Composition API使我们能够更好地将代码组织为更多的模块化功能，而不是根据属性的类型（方法，计算的数据）进行分离。 在旧的beforeCreate钩子函数之后和created的钩子函数...
onMounted用法
10-14
使用方法如下： ```javascript import { onMounted } from 'vue' export default { setup() { onMounted(() => { // 在组件挂载后执行的操作 }) } } ``` 需要注意的是，onMounted 只能在 setup 函数中使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值