vue.js中，啥时候用methods？啥时候用computed？啥时候用watch

Posted 2023-04-28

computed
以前的名字叫做ready
是在dom加载后马上执行的。

而methods中的函数，则必须要有一定的触发条件。
在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑，应当使用**计算属性**。
Vue实例的computed的属性
<div class="test">
<p>原始的信息message</p>
<p>计算后的信息ComputedMessage</p>
</div>

js代码
var myVue = new Vue(
el: ".test",
data:
message:12
,
computed:
ComputedMessage:function ()
return this.message+10;


);

界面会显示 12 和 22
上述的方式是一种缓冲的实现的效果，这种实现的方式依赖于它的缓寸，计算得到的属性只有在相关依赖（message）改变的时候才会重新取值，这就意味着只要message没有发生改变的时候，多次访问ComputedMessage都不会再重新执行计算的这个属性。。

计算后的ComputedMessage属性始终是依赖于message的
通过调用函数实现同样的效果
<div class="test">
<p>原始的信息message</p>
<p>计算后的信息MessageFunction()</p>
</div>

js代码
var myVue = new Vue(
el: ".test",
data:
message:12
,
methods:
MessageFunction:function ()
return this.message+10;


);

得到的结果和上面的结果是一样的，但是每次被重新渲染的时候都会被重新调用。
所以使用上述两种方式的时候，首先要确定你是否需要借助缓存
使用vue实例的watch
这个没有看懂呀
但是使用computed这个属性更加的方便和快捷
<div class="test">
<p>原始的信息fullName</p>
</div>

js代码
var myVue = new Vue(
el: ".test",
data:
firstName:"fur",
lastName:"bool"
,
computed:
fullName:function ()
return this.firstName+this.lastName


);

而且你可以computed属性设置setter getter是默认就有的。

演示set和get的调用过程
<div class="test">
<p>原始的信息fullName</p>
<button @click="fu">test</button>
</div>

js代码
var myVue = new Vue(
el: ".test",
data:
firstName:"fur",
lastName:"bool",
fullName:"sasas dsdsd dsds"
,
computed:
fullName:
get:function ()
console.log("get")
return this.firstName+this.lastName
,
set:function(value)
var names=value.split(" ");
this.firstName=names[0];
this.lastName=names[names.length-1];
console.log("set");


,
methods:
fu:function ()
myVue.fullName="sasas dsdsd dsds";
console.log(myVue.firstName); //sasas
console.log(myVue.lastName); //dsds


);

首先会输出get；

在点击按钮为fullName赋值的时候首先调用set 再调用get方法。
自定义的Watcher
虽然计算属性在大多数情况下是非常合适的，但是有的时候也需要自定义一个watcher。这是因为你想要在数据变化响应的时候，执行异步操作胡总和其他的操作是非常有用的。 参考技术A

1、methods是个方法，比如你点击事件要执行一个方法，这时候就用methods,

2、computed是计算属性，实时响应的，比如你要根据data里一个值随时变化做出一些处理，就用computed。

3、举一个例子帮助理解：

1）<div id="root">；

2） </div>；

3） <script>        var vm = new Vue(            el: '#root',            data:data,            methods:

4）method_now()                    return Date.now(); ,            

5）computed:                

6）computed_now: function ()                    return Date.now(); )

7）</script>

4、控制台访问：

1）$vm0.computed_now；

2）1491741921719$vm0.computed_now；

3）1491741921719$vm0.computed_now；

4）1491741921719$vm0.computed_now；

5）1491741921719$vm0.method_now；

6）()1491741949941$vm0.method_now；

7）()1491741950734$vm0.method_now；

8）()1491741951445$vm0.method_now；

9）()1491741952117。

5、methods是方法和原生js没区别，大多是需要我们主动调用（比如事件）。

6、computed是get 这个get有点特殊，只要触发所依赖数据的set会自动触发get。我们只关心get的return set由系统触发或者依赖的数据触发，官方说依赖缓存只是为了理解。其实Date.now()这种只是系统不能触发set，不能触发set get当然不会通知观察者。

7、watch 是set 由data触发，我们可以在set里进行自己的条件封装。

参考技术B mounted以前的名字叫做ready,不是computed。computed是计算属性。

c语言中const 是啥意思，怎么用，啥时候用？

希望能深入浅出，不要长篇大论。谢谢 。

const 表示常量，相当于宏定义，只能读取，不能修改。

常变量：const 数据类型 符号常变量 = 数值
如：const float PI=3.14;

指针常量：
数据类型 *const 指针变量=变量名
如：char *const p="abc";
const修饰的是指针变量，而不是指针的值，所以指针指向的值是可以修改的。

常指针：
const 数据类型 *指针变量=变量名
或者是
数据类型 const *指针变量=变量名
这是指针指向的值就是不可以改变的。

还有一种情况就是指针变量本身不可以修改，指针指向的值也是不允许修改的，就是指针常量和常指针组合，这种称为
常指针常量：
const 数据类型 *const 指针变量=变量名
或
数据类型 const *const 指针变量=变量名

还有一个比较重要的就是常函数：这个我自己还是前一段时间刚刚理解，建议你看看这个网页：http://blog.csdn.net/JimFire/archive/2008/10/06/3020013.aspx。 参考技术A const是定义常量的意思在编程中 常量是 只能初始的时候赋值 其后不能再改变被声明为常量的值比如const int a=1;//定义整型常量a并赋初值为1那么不能再改变a的值 如执行a=2; 就会运行错误在整个程序中 a的值始终为1 不能改变 这就是常量 参考技术B const的意思是：定义常量;用法：例如：const int a=1;以后我们的a就是常量了就不能改变其值。什么时候用：譬如：当我们用3.1415926的时候，每次都输入，比较麻烦，而且容易输错，在这种时候我们就要用const了。 参考技术C

常类型是指使用类型修饰符const说明的类型，常类型的变量或对象的值是不能被更新的。

const 推出的初始目的，正是为了取代预编译指令，消除它的缺点，同时继承它的优点。

作用:

（1）可以定义const常量，具有不可变性。

例如：const int Max=100; Max++会产生错误; 

（2）便于进行类型检查，使编译器对处理内容有更多了解，消除了一些隐患。 　

　例如： void f(const int i) ......... 编译器就会知道i是一个常量，不允许修改； 　

（3）可以避免意义模糊的数字出现，同样可以很方便地进行参数的调整和修改。 同宏定义一样，可以做到不变则已，一变都变！ 　　

如（1）中，如果想修改Max的内容，只需要：const int Max=you want;即可！ 　　

（4）可以保护被修饰的东西，防止意外的修改，增强程序的健壮性。 还是上面的例子，如果在函数体内修改了i，编译器就会报错； 　　

例如： void f(const int i) i=10;//error! 　

参考技术D const的作用是固化修饰，被修饰的对象本身的属性并没有发生变化，只不过是被固化不能修改，若修改，系统则会报错提醒被固化的值正在被修改！