VUE的事件如何可以更改const变量？

发布于 2025-02-08 06:15:14 字数 1830 浏览 0 评论 0原文

vue的 事件可以更改const变量吗？

“状态”是原始const变量。当然，不可能改变价值。

错误：状态++

但是，通过内联事件增加状态时没有错误。

这是为什么？

https://codepen.io/quietjun/pen/pen/pen/pen/govejvqqeditors = editors = editors = editors = editors = editors = ediTors = ediTors = ediTors = ediTors = ediTors = ediTors = 1111

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>모두의 코딩</title>
    </head>
    <body>
        <div id="app">
            <span>{{state}}</span><br />
            <button @click="state++">inline</button><br />
            <button @click="increase">function</button><br />
        </div>
    </body>
</html>

<script src="https://unpkg.com/vue@3"></script>
<script>
    const { createApp } = Vue;

    createApp({
        setup() {
            const state = 1;
            // of course below line is error
            //state++;
            const increase = () => {
                state++;
            };

            return {
                state,
                increase,
            };
        },
    }).mount("#app");
</script>

当然状态没有反应性。但是，使用开发人员工具，您可以看到该值已更改。

原文

How Vue's event can change const variable is possible?

The 'state' is the primitive const variable. Of course, it is impossible to change the value.

error: state ++

However, there is no error when increasing the state through the inline event.

Why is that?

https://codepen.io/quietjun/pen/gOvEjvq?editors=1111

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>모두의 코딩</title>
    </head>
    <body>
        <div id="app">
            <span>{{state}}</span><br />
            <button @click="state++">inline</button><br />
            <button @click="increase">function</button><br />
        </div>
    </body>
</html>

<script src="https://unpkg.com/vue@3"></script>
<script>
    const { createApp } = Vue;

    createApp({
        setup() {
            const state = 1;
            // of course below line is error
            //state++;
            const increase = () => {
                state++;
            };

            return {
                state,
                increase,
            };
        },
    }).mount("#app");
</script>

Of course state is not reactive. However, using the developer tool, you can see that the value has changed.

分享到QQ

分享到微博

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

发布评论

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

断念 2025-02-15 06:15:14

return {
  state,
  increase,
}

换句话说，在＆lt; template＆gt;内部是缩短的

return {
  state: state,
  increase: increase
}

，您不会从＆lt; script＆gt;中与const state进行交互。

您与模板上下文的属性进行交互。将其视为通过合并需要暴露于＆lt; template＆gt;的所有物体创建的对象（例如：data的传播返回，所有代码>，所有方法，设置，All props等...），

您可以安全地写入对象的属性，除非已定义为可写的：false，这显然不是这种情况。

简单示例：

const a = 1;

// a++; => Error: "Uncaught TypeError: Assignment to constant variable"
const b = {

  a,

  increment() {

    this.a++ //

return {
  state,
  increase,
}

is short for

return {
  state: state,
  increase: increase
}

In other words, inside <template> you don't interact with the const state from <script>.

You interact with the template context's properties. Think of it as an object created by merging everything that needs to be exposed to the <template> (e.g: spread return of data, all computed, all methods, spread return of setup, all props, etc...)

And you can safely write to an object's property, unless it has been defined as writeable: false, which is clearly not the case.

Simple example:

const a = 1;
// a++; => Error: "Uncaught TypeError: Assignment to constant variable"

const b = { 
  a,
  increment() {
    this.a++ // ???? similar to what you're doing in your handler
  }
};

b.a++;
console.log(b.a); // 2! no error.

b.increment();
console.log(b.a); // 3! no error.

Additionally, @click="expression" is wrapped in an anonymous function by Vue if expression is not callable (akin to @click="() => { expression; }").

Side note: In your example, if you want state to be reactive you have to declare it as const state = ref(1). Otherwise, even though state++ will change state's value, it won't trigger a re-render, so it will look like it didn't update, until something else triggers a component re-render and the template value gets updated (overridden).

回复收藏 0 原文

~没有更多了~