vue-6 生命周期

<template>
  <div id="lifecycle">姓名<input type="text" ref="testName" /></div>
</template>
<script>
export default {
  name: 'Lifecycle',
  data() {
    return {}
  },
  created() {
    console.log('created()方法被调用，因为created方法运行时DOM未加载所以取不到testName的值')
    this.$refs.testName.value = '张无忌'
  },
  mounted() {
    console.log('mounted()方法被调用。')
    this.$refs.testName.value = '张三丰' + this.$refs.testName.value
  },
  methods: {},
}
</script>

常用事件钩子

created 在组件实例处理完所有与状态相关的选项后调用,当这个钩子被调用时，以下内容已经设置完成：响应式数据、计算属性、方法和侦听器。然而，此时挂载阶段还未开始，因此 $el 属性仍不可用。该方法一般做数据初始化

mounted 在组件被挂载之后调用。

• 组件在以下情况下被视为已挂载：

  • 所有同步子组件都已经被挂载。(不包含异步组件或 <Suspense> 树内的组件)

  • 其自身的 DOM 树已经创建完成并插入了父容器中。注意仅当根容器在文档中时，才可以保证组件 DOM 树也在文档中。

  这个钩子通常用于执行需要访问组件所渲染的 DOM 树相关的副作用，或是在服务端渲染应用中用于确保 DOM 相关代码仅在客户端被调用。

  这个钩子在服务端渲染时不会被调用。