created の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• +Vue+created へ行く。
• +Vue+created の差分を削除

#author("2022-09-06T13:58:52+08:00","default:Admin","Admin")
#author("2022-09-28T16:07:36+08:00","default:Admin","Admin")
[[Vue]]

&color(red){※前提条件：本文基于 Vue 2.0 创作};
#contents

* 概要 [#e59c67bb]

实例已经创建完成之后被调用，在这一步，实例已完成以下配置：
数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化，el没有。 然而，挂在阶段还没有开始, $el属性目前不可见，

这是一个常用的生命周期，因为你可以调用methods中的方法，改变data中的数据，并且修改可以通过vue的响应式绑定体现在页面上，获取computed中的计算属性等等，通常我们可以在这里对实例进行预处理，也有一些童鞋喜欢在这里发ajax请求，值得注意的是，这个周期中是没有什么方法来对实例化过程进行拦截的，因此假如有某些数据必须获取才允许进入页面的话，并不适合在这个方法发请求，建议在组件路由钩子beforeRouteEnter中完成


* 画面里面的子组件，每次加载都想触发子组件的 created 方法 [#pb16673d]

key 属性不是给开发人员用的，而是用来 给vue 元素渲染的时候用的，每次渲染的时候会去拿这个key 值做对比，如果这一次的key 值和上一次的key值是不一样的才会重新渲染dom 元素，否则保持上一次的元素状态。
根据这个原理我们可以给key 直接绑定一个 时间戳

** 父组件 [#fde38669]

#codeprettify{{
<template>
    <div>
        <div>
            <h1>父级</h1>
            <button @click="handleLoad">点击重新加载子级</button>
        </div>
        <children :key="timer"></children>
    </div>
</template>
<script>
import children from '@/components/parent/children'
export default {
    name: 'parent',
    components: { children },
    data () {
        return {
            timer: ''
        }
    },
    methods: {
        handleLoad () {
            this.timer = new Date().getTime()
        }
    }
}
</script>
}}

** 子组件 [#v2077a34]

#codeprettify{{
<template>
    <div>
        子级
    </div>
</template>
<script>
export default {
    name: 'children',
    data () {
        return {}
    },
    created () {
        console.log('重新加载啦')
    }
}
</script>
}}

* 注意 [#l3baf237]

** [Vue warn]: Error in created hook: "TypeError: handler.call is not a function" [#q0f07bce]

这个是因为调用中生命周期钩子函数引起来的错误

请检查 created 里面，是否有未定义方法、或者是 created 里面什么处理都没有

#hr();
コメント：
#comment_kcaptcha