首页 > 其他分享 >由于Vue实例没有执行DOM挂载,所以不会执行mounted钩子函数

由于Vue实例没有执行DOM挂载,所以不会执行mounted钩子函数

时间:2023-11-13 22:58:01浏览次数:27  
标签:执行 Vue console log DOM 挂载 mounted

现有以下代码, 打印的结果是( )

new Vue({
    data: { a: 'first', b: 'second' },
    created: function () { console.log(this.a) },
    mounted(){ console.log(this.b) }
})

A
'first'

B
'first' 'second'

C
undefined undefined

D

正确答案:A

由于Vue实例没有执行DOM挂载,所以不会执行mounted钩子函数

mounted是vue中的一个钩子函数,一般在初始化页面完成后,再对dom节点进行相关操作。但是题例中没有执行dom挂载,所以mounted不会执行

至于为什么没有挂载,因为没有写el

<div id="app"> </div>

new Vue({ 

      el: '#app',
 
      data: { a: 'first', b: 'second' }, 
 
      created: function () { console.log(this.a) }, 
 
      mounted(){ console.log(this.b) } 
 
  })

这样就执行了dom挂载了

标签:执行,Vue,console,log,DOM,挂载,mounted
From: https://www.cnblogs.com/longmo666/p/17830516.html

相关文章

  • 在created等虚拟DOM没有完成挂载的钩子函数中,避免操作DOM报错可以把操作语句放在$next
    在created等虚拟DOM没有完成挂载的钩子函数中,避免操作DOM报错可以把操作语句放在$nextTick的回调函数中在组件内使用vm.$nextTick()实例方法特别方便,因为它不需要全局Vue,并且回调函数中的this将自动绑定到当前的Vue实例上需要使用$nextTick()原因是Vue是异步渲染$nextTick()返......
  • keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素,也不会出现在父组件链中。
    keep-alive是一个抽象组件:它自身不会渲染成一个DOM元素,也不会出现在父组件链中。在组件切换过程中将状态保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验性。include定义缓存白名单,keep-alive会缓存命中的组件;exclude定义缓存黑名单,被命中的组件将不会被缓存......
  • HTML03(函数,DOM,jQuery,正则表达式)
    基础js是弱类型的脚本语言;在浏览器的控制台打印:console.log();定义对象varobj={};对象的属性名默认就是字符串;函数前置声明varresult=fun(12,23.44);console.log(result);functionfun(a,b){//参数不需要声明类型retu......
  • 手撕Vuex-安装模块数据
    前言根据上一篇,【手写Vuex】-提取模块信息,我们已经可以获取到模块的信息了,将模块信息变成了我们想要的数据结构,接下来我们就要根据模块的信息,来安装模块的数据。在上一篇当中我们定义了一个ModuleCollection类,这个类的作用就是将模块的信息转换成我们想要的数据结构。接下来......
  • vue3中的vue-18n的table表格标题不动态变化中英文
    使用computed即可 eg:constcolumns=computed(()=>{returnreactive<any>([{title:proxy.$t('device.pm.table.index'),dataIndex:'index',width:50,slotName:'indexsort',ellipsis:true,......
  • vue的虚拟dom渲染真实dom的过程中首先会对新老VNode的开始和结束位置进行标记:oldStart
    关于Vue中的diff算法说法错误的是()A比较只会在同层级节点进行比较,不会跨层级比较B在diff比较的过程中,循环从两边向中间收拢。Cvue的虚拟dom渲染真实dom的过程中首先会对新老VNode的开始和结束位置进行标记:oldStartIdx、oldEndIdx、newStartIdx、newEndIdxD当老VNode节......
  • router其实是VueRouter的一个实例,所以它是一个全局对象,包含了所有的子对象和属性
    router其实是VueRouter的一个实例,所以它是一个全局对象,包含了所有的子对象和属性而route是正在跳转的这个路由的局部对象,可以获取这个正在跳转的路由的name,path,params,query等this.$router全局的路由对象,options.routes包括所有的路由路径,this.$router.push()this.$rout......
  • Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmedia
    下列关于Vue的描述错误的是()A当给某个组件修改某个值时,该组件不会立即重新渲染BVue内部使用原生Promise.then、MutationObserver和setImmediate实现异步队列,不会采用setTimeout(fn,0)C$nextTick()返回一个Promise对象D$nextTick()可以配合async/await使用正确答案:B官......
  • Python_Mooc_Stu_23_11_13_String_Random
    目录一、序列 (一)序列的索引 1.索引编号 2.序列元素索引访问3.注意事项 (二)序列的切片 1.切片格式 2.切片使用 3.参数缺省 二、序列的运算和常用处理函数 (一)序列运算 1.序列相加 2.序列相乘 3.序列对象比较 4.成员资格检查 (二)常用处理函数 1.len()......
  • Object.defineProperty(obj,key,val)不可以监听数组变化,需要做特殊处理,所以Vue3.0使用
    关于Vue双向数据绑定说法错误的是()AVue实现双向数据绑定是采用数据劫持和发布者-订阅者模式BObject.defineProperty(obj,key,val)可以监听数组变化,不需要做特殊处理CVue2.0数据劫持是利用ES5的Object.defineProperty(obj,key,val)方法来劫持每个属性的getter和setterD......