VUE JS：反应性语法

发布于 2025-01-28 13:29:43 字数 824 浏览 1 评论 0 原文

当我试图掌握反应性基本面及其语法时，我遇到了以下问题。考虑此片段：

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 提取到单独的函数和对象中，但是我该如何使用方法？此方法：MethodsObj 不起作用 - 显然。我希望能够在 createApp 初始化中使用我的 methodsobj 。是否可以？我知道这纯粹是学术的，但是这样的练习可以帮助我了解语法和对象关系。

原文

While I was trying to grasp reactivity fundamentals and its syntax I've encountered following problem. Consider this snippet:

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')

and html behind it:

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

This code works and I was able to extract data into separate function and object but how can I do it with method ?
This methods: methodsObj doesn't work - obviously. I want to be able to use my methodsObj in createApp initialization. Is it possible?
I know it is purely academic but such exercises help me understand syntax and object relations.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

白芷 2025-02-04 13:29:43

在javaScript中， var var A>，但它们的初始化不是。函数。您的代码依赖于提升，这可能是有问题的。

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

//

In JavaScript, vars are hoisted, but their initializations are not. functions and their definitions are also hoisted. Your code relies on hoisting, which can be problematic.

Here's a visualization of the hoisting in your original working code:

// ???? 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')

Now consider that same code, but replace methods: {method1: methodImpl} with methods: 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')

The issue with methodsObj in the example above can be fixed by declaring and initializing it before usage (which is generally a best practice):

// 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')

And here's the visualization of the hoisting above:

// ???? 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')

demo

One of the motivations of const and let (introduced in ES2015) was to avoid common bugs from var hoisting, such as you observed above. If you had used const/let instead of var in your original code, the compiler would've thrown an error, which might've signaled to you then that the declaration should be moved above the usage. Consider using a linter that discourages the use of var.