18910140161

这段代码让我懵了,可以跑,但完全搞不懂原理,请大佬解惑。

顺晟科技

2022-09-03 12:46:25

177

简单写了个页面,可以通过输入框搜索,点击分类按钮显示某一种类,或是按照字母顺序排列。代码如下:


顺晟科技:

}

select: function (type) {this.select_type = type;},

methods: {

啥叫没人呢???对吧。。。

感谢解答,我是在edge浏览器下跑成功的,但逻辑我看不懂。。。。后来我用vue3重新写了下代码(见我最新的回复),这回逻辑清晰了。

而且离奇的是 把app.result_list = app.result_list.reverse();换成 tmp_list = tmp_list.reverse(); 也可以正常执行,tmp_list是怎么访问到的?

感谢解答,我用vue3重新写了下代码(见我最新的回复),这回逻辑清晰了。

}

app.result_list = app.result_list.reverse();这段代码能运行也是很奇怪啊,我本地测试,这种写法报错啊,没有set函数,不能直接修改计算属性的。

Vue.createApp(App).mount(’#app’);

因为v-for使用了result_list,然后tmp_list 能在之后能获取到就是js里面var的特性了,显式声明为let就好了vue在render的时候就因为你的<div v-for="item in result_list">调用了result_list,这是在你使用methods里面的方法之前完成的,你在render前的钩子中调用就会有问题或者把 <div v-for="item in result_list"> 先注释掉

没看到你在哪里声明tmp_list,如果你没有使用声明关键字,例如var let const,那么在非严格模式下,当你第一次赋值时,就自动声明了一个全局变量

赋值≠声明,你只是赋值给tmp_list了而已,你并没有使用任何声明关键字声明tmp_list,我之前回复里已经贴了相关链接,里面有解释不声明就赋值的影响。这是js相关问题,与vue无关。建议你使用带有语法检查的编辑器,或者打包工具比如Webpack或者Vite,以严格模式运行,或者在官方沙盒里调试 https://sfc.vuejs.org/ ,严格模式下以后遇到类似情况会直接报错如果你不知道什么是严格模式,或者不知道严格模式与非严格模式的详细区别(其中就包含未声明情况下的赋值),可以搜索 javascript strict mode

感谢回复,tmp_list是在computed之中声明的。我的问题是点击之后好像是先执行methods:select,再执行computed

彻底懵了,请大佬给我解惑!感激不尽!!

但是点击button v-on:click=“sort”>却好像是先执行computed再执行methods:sort

},

没人吗?三天了。。。。

看了下文档,我之前用的是vue2,后来又换vue3重新写了下代码,之前那段vue2下的代码虽然能跑(Edge浏览器),但逻辑让我看不懂,不搞了…这回vue3的也能跑,而且逻辑清晰…

const App = {data(){return {b_sort_text: “升序”,search: “”,select_type: “all”,}},

如上,代码可以正常跑起来,看起来应该是先执行method之中的方法,然后属性变化触发了computed之中方法,计算出result_list,所以搜索和分类功能可以正常运行,但sort这个函数不是应该在computed之中的result_list之前执行吗?为何app.result_list.reverse() 也能返回正常结果???

computed 里面建议不要写太长的代码,容易失控。

node.js - Why does accessing variables declared without `var` work without having to use `require` in other files? - Stack Overflow.

computed: {result_list: function() {

相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航