Vue JS：反应式语法

Question

当我试图掌握反应性基础知识及其语法时，我遇到了以下问题。 考虑这个片段：

const app = Vue.createApp({
   data: dataFunction,
   methods: {method1:  methodImpl}
})
var dataObj = {
    title: 'Holiday',
    author: 'Stanley Middleton',
    age: 45
}
function dataFunction (){
    return dataObj
}
var methodsObj = {
    method1:  methodImpl
    
}
function methodImpl (){
    this.title = 'Infinite Jest'
}
app.mount('#app')

和它背后的html：

<div id="app">
        [...]
        <div @click="method1">change book title</div>
</div>

这段代码有效，我能够将data提取到单独的函数和对象中，但是我该如何使用method呢？ 这个methods: methodsObj不起作用 - 很明显。 我希望能够在createApp初始化中使用我的methodsObj 。 可能吗？ 我知道这纯粹是学术性的，但这样的练习有助于我理解语法和对象关系。

Answer 1

在 JavaScript 中， var被提升，但它们的初始化不是。 function s 和它们的定义也被提升了。 您的代码依赖于提升，这可能是有问题的。

这是原始工作代码中提升的可视化：

// 👇 HOISTED DECLARATIONS
var dataObj = undefined;
function dataFunction (){
    return dataObj
}
var methodsObj = undefined;
function methodImpl (){
    this.title = 'Infinite Jest'
}
// 👆 HOISTED DECLARATIONS

const app = Vue.createApp({
   data: dataFunction,
   methods: {method1:  methodImpl} // ✅ methodImpl declared above
})
// INITIALIZATION
dataObj = {
    title: 'Holiday',
    author: 'Stanley Middleton',
    age: 45
}
// INITIALIZATION
methodsObj = {
    method1:  methodImpl
}

app.mount('#app')

现在考虑相同的代码，但将methods: {method1: methodImpl}替换为methods: methodsObj ：methodsObj：

// 👇 HOISTED DECLARATIONS
var dataObj = undefined;
function dataFunction (){
    return dataObj
}
var methodsObj = undefined;
function methodImpl (){
    this.title = 'Infinite Jest'
}
// 👆 HOISTED DECLARATIONS

const app = Vue.createApp({
   data: dataFunction,
   methods: methodsObj // ❌ methodsObj undefined above, so method1 would be undefined in the app
})
// INITIALIZATION
dataObj = {
    title: 'Holiday',
    author: 'Stanley Middleton',
    age: 45
}
// INITIALIZATION
methodsObj = {
    method1:  methodImpl
}

app.mount('#app')

上面示例中的methodsObj问题可以通过在使用前声明和初始化来解决（这通常是最佳实践）：

// declare and initialize vars here...
var dataObj = {
    title: 'Holiday',
    author: 'Stanley Middleton',
    age: 45
}
function dataFunction (){
    return dataObj
}
var methodsObj = {
    method1:  methodImpl
    
}
function methodImpl (){
    this.title = 'Infinite Jest'
}

// now, use the declarations from above
const app = Vue.createApp({
   data: dataFunction,
   methods: methodsObj
})

app.mount('#app')

这是上面吊装的可视化：

// 👇 HOISTED DECLARATIONS
var dataObj = undefined;
function dataFunction (){
    return dataObj
}
var methodsObj = undefined;
function methodImpl (){
    this.title = 'Infinite Jest'
}
// 👆 HOISTED DECLARATIONS

// INITIALIZATION
dataObj = {
    title: 'Holiday',
    author: 'Stanley Middleton',
    age: 45
}
// INITIALIZATION
methodsObj = {
    method1:  methodImpl
}

const app = Vue.createApp({
   data: dataFunction,
   methods: methodsObj // ✅ methodsObj declared and initialized above
})

app.mount('#app')

演示

const和let （在 ES2015 中引入）的动机之一是避免var提升的常见错误，例如您在上面观察到的。 如果您在原始代码中使用了const / let而不是var ，编译器会抛出一个错误，这可能会向您发出信号，然后声明应该移到用法之上。 考虑使用不鼓励使用var的 linter 。