问题
当我们需要 data 的初始状态时，应该怎么获取？
解决
可以使用 $options 获取
使用方法
代码：
<template> <div> <h2>options 测试页面</h2> <hr> name的初始值：{{initName}} <hr> mounted修改后name的值：{{name}} <hr> <button @click="handleClick">获取data里name的初始值</button> </div> </template> <script> export default { data () { return { name: '凯小默', initName: '' }; }, mounted() { this.name = 'kaimo'; console.log('mounted-->', this.name); }, methods: { handleClick() { } }, }; </script>
当前的效果如下：
接下来，我们实现name的初始值获取：
先看一下 $options 到底是什么样的
handleClick() { console.log(this.$options); }
获取对比：
handleClick() { console.log('$data：data', this.$data); console.log('$options：data', this.$options.data.call(this)); }
完整代码：
<template> <div> <h2>options 测试页面</h2> <hr> name的初始值：{{initName}} <hr> mounted修改后name的值：{{name}} <hr> <button @click="handleClick">获取data里name的初始值</button> </div> </template> <script> export default { data () { return { name: '凯小默', initName: '' }; }, mounted() { this.name = 'kaimo'; console.log('mounted-->', this.name); }, methods: { handleClick() { console.log('$data：data', this.$data); console.log('$options：data', this.$options.data.call(this)); this.initName = this.$options.data.call(this).name; } }, }; </script>
注意：在使用 $options.data 时 用 call 调用并传入当前的 this，不然默认的 this 可能会指向全局的 vue 对象，造成报错。
