vue代码片段

<template>
<div>
</div>
</template>
<script>
export default {
    name: "component_name",
    components: {
    },
    props: {
        "attr_name": {
           type: Object,
           required: false,
           default: () => ({})
        }
    },
    data () {
        return {
            a: 1,
            b: {c: 1}
        };
    },
    watch: {
        a (newValue, oldValue) {},
        'b.c' (newValue, oldValue) {}
    },
    beforeRouteEnter (to, from, next) {
        // 在渲染该组件的对应路由被 confirm 前调用
        // 不！能！获取组件实例 `this`
        // 因为当钩子执行前，组件实例还没被创建
        next()
    },
    beforeRouteUpdate (to, from, next) {
        // 在当前路由改变，但是该组件被复用时调用
        // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
        // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
        // 可以访问组件实例 `this`
        next()
    },
    beforeRouteLeave (to, from, next) {
        // 导航离开该组件的对应路由时调用
        // 可以访问组件实例 `this`
        next()
    },
    // 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用
    beforeCreate () {},
    // 实例创建完成后被立即调用
    created () {
        // this.'$'set(this.'$'data, "attrName", "value")
    },
    // 挂载到实例上去之后调用该钩子
    mounted () {
        // 注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.nextTick 替换掉 mounted
        // this.'$'nextTick(function () {
        // })
    },
    // 计算属性
    computed: {
        // 仅读取
        aDouble: function () {
            return this.a * 2
        },
        // 读取和设置
        aPlus: {
            get: function () {
                return this.a + 1
            },
            set: function (v) {
                this.a = v - 1
            }
        }
        // vm.aPlus // => 2
        // vm.aPlus = 3
        // vm.a // => 2
        // vm.aDouble // => 4
    },
    // 事件集合
    methods: {},
    // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
    updated () {},
    // 实例销毁后调用
    destroyed () {}
}
</script>
<style lang="less" scoped>
</style>