Vue.js -在computed中使用本地方法是不是一种糟糕的做法？
在Vue.js中，在computed中使用本地方法并不是一种糟糕的做法，而是一种常见的做法。computed属性用于计算衍生的数据，可以根据依赖的响应式数据进行缓存，只有当依赖的数据发生变化时才会重新计算。而本地方法可以在computed属性中使用，用于处理一些逻辑或计算操作。
使用本地方法的好处是可以将复杂的计算逻辑封装在一个函数中，使computed属性的代码更加清晰和可维护。同时，本地方法可以在多个computed属性中共享，避免了代码的重复编写。
然而，需要注意的是，在computed中使用本地方法时，本地方法不能直接修改computed属性依赖的响应式数据，否则会导致computed属性的缓存失效。如果需要修改响应式数据，应该使用methods方法。
总结起来，使用本地方法在computed中并不是一种糟糕的做法，它可以提高代码的可读性和可维护性。但需要注意遵循Vue.js的响应式规则，避免直接修改响应式数据。
相关·内容
1回答
我正在使用Vue.js进行一个项目，我大部分时间都使用组件，但有时我只想添加一些Vue.js语法，而不完全创建一个组件。
因为我不像通常那样使用呈现，所以Vue附加到的整个HTML内容不会被覆盖，允许我在现有的sprinkle上使用一些Vue.js语法。
new Vue({
el: '#vue',
name: 'Vue root',
data: {
store
},
components: {
Example
}
});
将一些Vue.js语法添加到现有的HTML中的一个例子是:保持两个
浏览 4提问于2017-03-02得票数 1
回答已采纳
1回答
我在本地的Vue.js项目中有以下.html文件(它是一个简化的版本)：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<
浏览 0提问于2019-12-11得票数 2
5回答
在v-for循环中显示数组之前，如何按名称或性别对数组进行排序？
<div id="string">
<ul>
<li v-for="array in arrays">{{ array.name }}</li>
</ul>
</div>
// Vue.js v. 2.1.8
var string = new Vue({
el: '#string',
data: {
arrays: [
{ name: 'kano',
浏览 4提问于2017-03-19得票数 57
回答已采纳
1回答
我有一个类似下面的函数：
public sub TestFunction() As Boolean
On Error GoTo NewError:
Dim testObject As New TestObject
For TestVaiable 0 to 1000
TestObject.TestMethod(TestVariable)
Next
TestFunction = True
Exit function
NewError:
TestFunction = False
End Function
我有两个问题: 1)在循环中不断重用对象是不是一种糟糕的做法？我不认为它是2)如果
浏览 1提问于2011-12-14得票数 0
回答已采纳
1回答
我试图让我的Spinner组件只在加载API数据之前显示，否则，应该隐藏它。我创建了一个名为value的变量，并在获取API信息时将其设置为true，但在使用v-if和v-else指令时，我似乎弄错了。目前，在使用v-if时只加载一个组件。
我做错了什么？
我是Vue.js新手，我看到了名为v-cloak的指令，但我不太确定如何使用它。
<template lang="">
<div>
<Header />
<Spinner v-if="!value" />
浏览 2提问于2021-01-18得票数 1
回答已采纳
我正在构建一个具有多个模块的Vuex商店。我想轻松地定义和映射getters和操作的类型，这样我就可以在path中自动命名模块，而不是为所有方法调用$store.getters“module define /gettername”。
我发现我可以使用vuex库中的createNamespacedHelpers助手，但是它不工作，或者我的配置中缺少一些东西。
下面是我拥有的namespace-helper.js文件
import { createNamespacedHelpers } from 'vuex';
import { getters, actions } from &#
浏览 16提问于2018-01-24得票数 0
回答已采纳
在0.12.8之前，计算出的属性就像getter一样--每次访问它时，都会重新计算getter函数。在0.12.8中，这已经得到了改进--计算的属性是缓存的，并且只有在必要时才延迟重新评估。
对于当前的项目，我实际上需要在每次访问时重新评估一些属性。当前的惰性评估无法工作的原因是，在我的一些属性中，还有其他“动态变量”不在Vue.js的监视下。
浏览 5提问于2015-08-19得票数 17
1回答
我的环境是Vue CLI3.11(来自Node.js 12.10)和Google Chrome。 我想写一个在某些情况下忽略监视的语法。然而，我还没有找到一个好的方法，因为Vue.js改变它的值与JavaScript略有不同。 例如，在这段代码中，值总是被记录下来，因为watch()中的"valuelock“总是为false。 <script>
export default {
name: 'app',
data(){
return {
v: null,
valuelock: false
};
},
浏览 10提问于2019-10-02得票数 0
回答已采纳
2回答
如何重用Vue Js中现有的一些ES6类。
有一个类，其中有一个变量由可观察的更新。
class A {
public a: string;
someobservable.subscribe((a) =>{
this.a = a;
})
}
在vue.JS中创建了这个类的对象。
示例如何使用属性：
created: {
objA = new A();
}
methods: {
getA() {
if(this.objA !== undefined){
return objA.a;
浏览 0提问于2018-10-08得票数 4
回答已采纳
1回答
我有一个标签工具组件，有三个不同的优先级别。现在我想进行过滤搜索。是否可以在计算的tags[n]函数中访问tagsFilter？
这是我的最新版本：
我想在收到一个v-for="tag in tags[n]"的时候用：v-for="tag in tagsFilter"代替TypeError: this.tags.filter is not a function
有谁有主意吗？
Vue.js模板：
<div id="app">
<input id="input-search" type="text
浏览 2提问于2018-02-19得票数 4
回答已采纳
我一直在寻找一种使用vue js和axios在我的表中显示过滤结果的方法。当我在表上使用if语句时，会显示过滤后的结果，但是当我导出数据时会出现问题，因为所有的结果，包括未过滤的结果都是提取出来的。我现在正在过滤axios响应，但是表显示了我的响应中的所有内容。任何关于方法的提示，我可以使用filter以外，以获得过滤的结果，将不胜感激。
我的桌子
<v-data-table
:headers="headers1"
:items="new_users"
浏览 0提问于2020-09-09得票数 0
回答已采纳
我一直在使用Javascript回调函数，了解了"this“的作用域问题，以及如何通过使用"call”或"apply“并传入对象引用来消除它。
然而，我发现了一些东西，我想知道下面的做法是不是很糟糕？因为它完全使用对象名而不是"this“来消除作用域问题。假设我有一个有回调的函数，例如：
function getUserInput(firstName, lastName, callback) {
callback(firstName, lastName);
}
和一个像这样的对象：
var clientData = {
id: 1,
fullNam
浏览 1提问于2014-02-27得票数 0
我一直在build方法中声明函数，现在我想知道这是不是一个糟糕的做法。 @override
Widget build(BuildContext context) {
void doRegister() async {
...
}
return Scaffold(
...
);
} 这种方法有什么问题吗?我应该在build方法之外声明函数吗？
浏览 28提问于2021-11-23得票数 0
我是Vue.js & Buefy的新手，我相信我理解为什么会发生这种情况，但不知道如何修复它。
我有一个按国家排序的项目合作伙伴列表，我需要输出一个带有复选框的列表(我在页面上使用Buefy )和国家名称作为标题(只有当有一个“新”国家时)。这以浏览器执行无限循环结束(用console.log验证)，Vue Devtools给出警告“你可能在组件渲染函数中有无限更新循环”。
我相信这是因为更改prevTitle会触发重新渲染。我知道将参数传递给计算属性是不可能的，而且我也不能使用我发现的任何技巧来使partner.country在那里可用。
var app = new Vue({
浏览 9提问于2020-02-20得票数 0
回答已采纳
我是vue.js的新手，我有一个问题，我有一个计算功能，提醒一个单词颠倒了，我让这个功能在点击按钮时工作，但它在页面加载时工作，那么问题是什么。这是vue.js代码，
new Vue({
el: '#computed',
data: {
word: 'welcome',
},
computed: {
alertRev: function() {
// get the word reversed
alert (this.word.split('').reverse().join('')
浏览 0提问于2017-04-21得票数 2
我需要获得一个json文件，它在我的本地机器上，但我在Restangular中的baseUrl不是本地主机...
因此，这里有一个问题:当基本url不是本地主机时，是否可以使用Restangular.service获取本地文件？
我该怎么做呢？
浏览 12提问于2016-09-13得票数 0
如何为模型做自定义的双向过滤，在Vue.js中动态更新。
下面来自docs的代码示例适用于输入模糊。但我需要它在按键时起作用。
Vue.filter('currencyDisplay', {
read: function(val) {
return '$'+val.toFixed(2)
},
write: function(val, oldVal) {
var number = +val.replace(/[^\d.]/g, '')
return isNaN(number) ? 0 : parseFloat(n
浏览 0提问于2016-02-12得票数 3
因此，有一个父组件&子组件，我在父组件内部的本地存储中设置购物车项，并希望在子组件中访问它们。现在的问题是，在子组件中，“购物车是空提示符”首先运行，即使我从本地存储中提取购物车项目。因此，我希望将子组件的呈现延迟2秒，以便准备好从本地存储中提取的购物车项&首先访问，而不是运行"cart是空“提示符。
下面是子组件中的useEffect，在其中提取和检查购物车项-
var cartItems;
useEffect(() => {
if (localStorage.getItem("cartItems")) {
cartItems = JSON
浏览 5提问于2022-02-11得票数 0
2回答
尝试使用基于两个标志的数据绑定来绑定启用状态。如果flagA是真的，flagB也是假的，我们需要启用输入框。
var viewModel = function () {
var self = this;
self.flagA = ko.observable(true);
self.flagB = ko.observable(false);
self.changeState = function () {
self.flagA(false);
}
}
ko.applyBindings(viewModel);
<script s
浏览 1提问于2015-04-02得票数 0
回答已采纳
在将我的项目拆分成许多OO类之后，我必须通过多个构造函数传递对我的Model实例(包含Mongoose模型和模式)的引用。
在model.js模块中创建一个Model类的实例，然后在我需要的任何地方都需要这个model.js模块，这是不是一种糟糕的做法？
如下所示：
Model = function () { ... }
module.exports = new Model();
这将依赖于节点的来允许相同的Model实例在文件之间共享，就像拥有全局单例一样。
或者我应该显式地通过构造函数传递依赖关系？
浏览 1提问于2012-07-01得票数 0
回答已采纳
4回答
这是不是很好的做法?如果我把变量的值稍微改变一下，有没有可能出现fubar？
例如：
$myVar = 1;
$myVar = $myVar + 33959902;
$myVar = rtrim($myVar,2);
$myVar = explode(",",$myVar);
我知道这会起作用，但是在PHP中这样做安全吗？
浏览 0提问于2011-09-02得票数 3
2回答
数据库名的限制不能创建为数字吗？
mysql> CREATE DATABASE 1;
...results：
错误1064 (42000)：您的SQL语法出现错误；请检查与MySQL服务器版本相对应的手册，以便在第1行使用接近“1”的正确语法
....or，我是不是做错什么了？
浏览 17提问于2010-01-23得票数 2
回答已采纳
在下面的代码中使用局部变量是不是很糟糕?如果是，为什么？
var lib = new function () {
var localVariable;
this.publicCall = function (e) {
localVariable = e.variable;
};
var privateCall = function (e) {
localVariable = e.variable;
};
};
浏览 0提问于2012-07-27得票数 0
回答已采纳
1回答
我们有一个在WebView上运行的应用程序，它有自己的本地可访问性。出于以下几个原因，将其切换为本机使用VoiceOver不是一种选择。当VoiceOver打开时，它会与我们的可访问性发生冲突，通常会同时说两件事。
有没有一个接口可以打开和关闭VoiceOver，或者当焦点在我们的WebView中时关闭语音？
浏览 1提问于2011-02-02得票数 1
我正在使用第三方API，它使用以下代码从环境变量加载全局属性文件
System.getProperty("user.home");
或
System.getenv(XYZ_HOME_VAR_NAME);
由于我使用的是Jenkins CI，所以我必须在系统的user_home中创建文件夹。
我不确定这是不是一个糟糕的编码实践。
如果这是正确的，请建议...
浏览 1提问于2013-07-26得票数 1
2回答
假设我在Vue.JS中有一个对象列表
data () {
return{
examples: [
{
exampleID: 5,
exampleText: 'foo'
},
{
exampleID: 3,
exampleText: 'bar'
}
]
}
}
现在，假设我想在我前面创建的元素中使用exampleID 3显示对象
<Task
v-for="example in examples"
:key="example.exam
浏览 3提问于2020-11-11得票数 0
回答已采纳
1回答
直接将结构成员的值赋给变量
、、、、
我遇到了下面的代码，它非常新颖和有趣。
u8 m_var = stptfunc()->mem;
以前从未见过这样的初始化。代码可以编译并正常运行。我只是好奇这是不是一种常见的做法。
通常我会像这样编写代码...
strtype *ptrfunc()
{
// statements
}
sttype *stvar = ptrfunc();
u8 var = stvar->mem;
示例代码：
typedef unsigned char u8;
typedef struct{
u8 mem;
}sttype;
sttype *stptfunc(void)
{
st
浏览 9提问于2021-06-12得票数 0
表的名称应该是固定的，但在我的场景中，表名的最后一部分是基于配置文件的，所以在本地是X，但在dev是Y，依此类推，直到Prod。有没有办法将值动态添加到表名中。
浏览 3提问于2018-08-18得票数 1
1回答
将procs分配给常量
、、、
我发现procs和lambdas可以用来替代短方法和助手模块。我将不属于其他任何地方的方法放入一个文件中，该文件只是一个分配给常量的procs列表。例如，init.rb需要一个文件helper_procs.rb，它包含以下内容：
RED_TEXT = proc{|t| "\e[31m#{t}\e[0m"}
GREEN_TEXT = proc{|t| "\e[32m#{t}\e[0m"}
YELLOW_TEXT = proc{|t| "\e[33m#{t}\e[0m"}
CURRENT_TIME = proc do
date = Time.
浏览 0提问于2013-06-08得票数 1
回答已采纳
2回答
我正在开发一个Vue.js应用程序，在该应用程序中我必须处理深度嵌套的数据结构(树和 )。
在阅读了有关使用简单数据结构、纯函数和减少(非本地)突变的文章之后，我相信，接受这些想法将提高代码的可维护性和简单性。
当只使用纯函数实现树操作模块时，我学到了两件事：
避免在JavaScript中无意中发生嵌套对象的变异需要大量的注意和纪律，特别是在大型团队中。
我不喜欢用调用乱扔代码
昨天，我偶然发现了，这在我看来很棒。在玩了一会儿之后，我觉得它使我的纯功能更容易推理。
在与操作模块交互时，我的Vue.js组件将使用和。
我的问题：Vue.js和Immutable.js在一起在技术上
浏览 0提问于2018-01-27得票数 10
1回答
我有一个dev分支，我们把所有东西都推到这个分支上。最后一次提交破坏了我们的整个构建，我需要删除它。对于本地，我使用
git reset --hard <SHA_ID>
这对于本地存储库很有效，但是当我尝试推送时，更改被拒绝，因为当前分支的尖端在远程之后，并显示我在再次推送它之前使用git pull。
我的问题是，如何让远程数据库转到与本地存储库相同的头部，并删除最后一次提交。
浏览 10提问于2016-09-12得票数 2
回答已采纳
3回答
有没有像on-shown和on-show这样的使用vue.js的回调方法？
我在div元素上使用v-show="my-condition“。但是里面有一些charts.js图表，这些图表只有在可见时才能呈现。
有人知道只有当父级可见时才能呈现chart.js吗？它们位于可选选项卡中，因此可能会多次触发。
我使用的是Vue.js和vue-strap。
浏览 0提问于2016-01-02得票数 9
在以前使用过Vue.js之后，我开始熟悉AngularJS了，我想知道是否有任何方法可以显式地声明数据{ }中的每个数据属性。
在AngularJS中，将ng模型声明为HTML属性就足够了，当应用程序初始化时，它会将它们添加到作用域中，这样就可以读取/操作它们。
我担心的是，我用大约100个单独的属性制作了一个技术计算器，每项属性声明两次似乎是多余的。
Vue是否提供隐式获取模型属性，而不显式地在应用程序数据中声明它们？
示例AngularJS，无需在应用程序中显式声明模型属性：
<script src="https://code.angularjs.org/1.6.9/angu
浏览 3提问于2021-10-26得票数 1
回答已采纳
我正在学习currentDashboard，所有从Vue.JS数据表达式引用仪表板属性的尝试都会导致“仪表板未定义”。Vue是在currentDashboard仪表板之前对表达式进行某种程度的评估，还是需要一些限定符来引用它，这没有帮助？
vue = new Vue({
el: '#dashboard',
data: {
dashboards: store.getDashboards(),
currentDashboard: dashboards[0],
}
})
浏览 0提问于2018-07-02得票数 6
1回答
但是，我想要从vue单文件组件的模板访问我的环境变量，执行以下操作： <img :src="`${process.env.VUE_APP_API_BASE_URL}/image/${image.filename}`" alt="" /> 给了我一个错误： Property or method "process" is not defined on the instance but referenced during render. Make sure that this property is reactive, either i
浏览 72提问于2021-05-10得票数 4
回答已采纳
我在SPA上有一个带有vue.js的v-for循环，我想知道在开始时设置一个变量，然后每次需要的时候都打印它，因为现在我每次需要打印变量时都调用一个方法。
这是JSON数据。
{
"likes": ["famiglia", "ridere", "caffè", "cioccolato", "tres leches", "ballare", "cinema"],
"dislikes":["tristezze", "abuso su
浏览 0提问于2018-07-17得票数 10
回答已采纳
1回答
转换内容时的Vue转换
、、、
我遇到了一个问题，试图转换内容转移。本质上，我的数据数组显示在DOM的不同部分，具体取决于state。
基本概念：
打开
反馈1完成
反馈2完成
反馈3已完成
关着的不营业的
我试图达到的目标:当您按下“关闭”时，反馈会从打开中消失，然后消失在封闭部分下面。
--这就是我尝试过的:通过转换呈现“关闭”项的：
<transition name="fade">
<v-row v-if="feedbackItem.state ==='closed'" v-for="feedbackItem in c
浏览 3提问于2020-03-11得票数 0
回答已采纳
我想知道动态地扩展一个函数的原型是不是一个坏的做法。我正在考虑使用一个静态方法来实现这一点，该方法接收要添加到原型中的属性名称和函数。
这是一种糟糕的做法吗？
function Test() {
this.condition = false;
}
Test.extend = function(id, task) {
this.prototype[id] = function() {
return task.apply(this, arguments);
};
};
浏览 3提问于2016-05-11得票数 6
在我的例子中，我希望在computed中更新数据本身。如下例所示：
var example = new Vue({
el: '#example',
data: {
Foo: []
},
computed: {
Bar: {
// getter
get: function(){
return
浏览 1提问于2020-06-11得票数 0
4回答
只是想知道(在Grails/Java中)在MVC设计的视图/gsp中调用：Foo.list()而不是通过模型(即foos: Foo.list())传递并使用它是不是一种糟糕的做法？
在我看来，由于它是如此简单的显示，这是很好的，但另一方面，我知道直接从视图访问域对象是不好的做法。
提前谢谢。
浏览 2提问于2011-02-04得票数 0
回答已采纳
我想知道这是不是非常糟糕的做法。
当用户从下拉列表中选择一个项目或在输入中键入一些文本时，我会覆盖arrangedContent并过滤内容，因此此函数可能会运行很多次：
我想在过滤结果后对结果进行排序。我本来想这样做的，但我反对这样做：
arrangedContent: ( ->
filtered = @get('content').filter (item) ->
#filter content
Ember.ArrayProxy.createWithMixins Ember.SortableMixin,
sortProperties: [
浏览 2提问于2013-05-16得票数 0
回答已采纳
我正在用ASP.net开始一个项目，但是自从我第一次开始使用asp.net mvc。所有的用户控件都有点奇怪，你只需将其拖到页面上并将其绑定到数据源即可。
简单地在文件背后的代码上创建一个公共变量，并使用for-each循环遍历它，就像在asp.net mvc中使用剃刀引擎并以这种方式制作一个表，这是不是一种糟糕的做法？
浏览 5提问于2012-02-29得票数 1
3回答
我有一个相当大的vue.js 2应用程序，它具有动态选项卡机制。用户可以与应用程序打开和关闭选项卡进行交互，每个选项卡代表一个路由。为了实现这一点，我使用vue路由器并保持活力，如下面的示例。
<template>
<div id="app">
<keep-alive>
<router-view :key="routerViewKey"/>
</keep-alive>
</div>
</template>
当用户单击“关闭”选项卡按钮时，将调用
浏览 20提问于2020-12-06得票数 6
在实现片段到活动的通信时，通常被告知的示例是：
MyActivity extends Activity implements MyInterface {
...
@Override
public void myMethod() {
// Do something....
}
...
}
MyFragment extends Fragment {
...
private void aMethod() {
((MyInterface) getActivity()).myMethod();
}
...
}
事实是，在我的项目中，片段通常只是用来以&#
浏览 0提问于2016-11-22得票数 3
我是react的初学者，我读到过我们不应该直接更新钩子变量，而应该通过setState更新。在我的代码中，我将一个状态变量作为对象分配给另一个变量，然后对其执行console.log操作。这是不是一个坏的做法，因为它暴露了我的item钩子变量？
const [item,setItem] = useState({fruit:'apples'});
let dummy = Object.assign({},item); //is this a bad practice ?
console.log(dummy);
我使用Object.assign()来克隆对象，这样它就不会像dum
浏览 22提问于2021-03-07得票数 0
自从最新的Ember发布以来，似乎有了新的setter和getter方法语法。
我们是否应该习惯做这样的事情：
fullName: Ember.computed('firstName', 'lastName', function() {
return this.get('firstName') + ' ' + this.get('lastName');
})
而不是：
fullName: function() {
return this.get('firstName') + ' &#
浏览 2提问于2015-05-14得票数 1
我刚从2.5.21更新到vue.js 2.6.0，我的一些页面停止工作了。 最终，我发现问题出在以下几个方面： Vue.component('foo' , {
data : function() { return { a : 42 /*this is computed dynamically in real life*/ } } ,
template : `<div><slot v-bind:a="a">Default Text</slot></div>`
}); 我是这样使用它的 <foo
浏览 98提问于2019-02-05得票数 4
回答已采纳
1回答
我正在开发一个具有多个窗口的应用程序，所有窗口都使用自己的web服务。
每个应用程序使用多个web服务是不是不好的做法？如果是这样，缺点是什么？
浏览 0提问于2010-12-03得票数 0
回答已采纳
我在Vue.js中有一个组件，它美化了一些内容。本质上，我在方法中清除它，并在HTML标记中打印其结果：
<template>
....
<div v-for="(value) in mydata">
<h2>{{ prettifyMyNumber(value) }}</h2>
</div>
...
</template>
其中的代码如下所示：
export default {
// ...
methods: {
prettifyMyNumber(nu
浏览 3提问于2020-10-06得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
