武进路(3)

在前一篇文章中，我们对vue有了初步的了解。在本文中，我们将给出一个vue方法的例子，计算属性编译和监听器观察。

现在我们有了一个要求，变量firstName='hello '和变量lastName='world '。我们需要将这两个变量拼接起来显示在前端。我们能想到的最基本的事情是：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title Vue/title script src=' http :3359 cdn . jsdeliver . net/NPM/Vue '/script/head dydiv id=' app ' p { { first name ' ' last name } }/p { { first name } } { { last name } }/p/div script var app=new Vue({ El : ' # app '，Data : {二是写两个{{}}插值表达式，看似效果不错，但如果要拼接多个，在HTML代码中会显得多余，后期维护起来会比较困难。接下来，让我们看看如何在方法中实现它：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title Vue/title script src=' http :3359 cdn . jsdeliver . net/NPM/Vue '/script/head dydiv id=' app ' p { { full name()} } { { time } }/p/div script var app=new Vue({ El : ' # app '，data: { firstName: ' hello '，Last name 3360把这个还给我。名为“这个”。last name } } })/脚本/正文/HTML。在上面的代码中，我们在methods中定义了一个fullName的方法，然后通过{{}}插值表达式放入HTML中，加载页面时直接调用。运行结果如下：

当页面被加载时，我们同时定义一个时间数据。当我们更新这个时间数据时，结果如下：

我们发现，当我们更新时间数据时，fullName方法也会被调用一次。这显然不理想。

让我们看一下使用监听器观察的方法：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title Vue/title script src=' http :3359 cdn . jsdeliver . net/NPM/Vue '/script/head dydiv id=' app ' p { { Full name } } { { time } }/p/div script var app=new Vue({ El : ' # app '，data: { firstName: ' hello '，lastName:this . full name=this . first name ' ' this . last name；}，last name(){ console . log(' last name changed ')；this . full name=this . first name ' ' this . last name；} } })/脚本/正文/html结果如下：

在Vue实例的watch属性中定义了两个方法，名字和姓氏。watch属性中的中文名称与data属性中的数据变量名相同，这意味着将实时监控数据变化，如果监控到变化，DOM将实时更新。

让我们首先看看像methods方法这样更新时间数据时的变化：

我们可以看到，在更新时间数据时，没有调用名字和姓氏中的数据。当我们更新名字和姓氏的数据时，结果如下：

我们可以看到，只有当我们更新firstName或lastName数据时，fullName数据才会被更新，这意味着当数据装载到DOM上时，它将被缓存；如果数据没有更新，缓存的数据将继续使用；当数据更新时，将调用watch中的方法，这比方法好得多。

让我们看看计算属性：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title Vue/title script src=' http :3359 cdn . jsdeliver . net/NPM/Vue '/script/head dydiv id=' app ' p { { full name } } { { Time } }/p/div script var app=new Vue({ El : ' # app '，data: { firstName: ' hello '，lastName:返回this . first name ' ' this . last name；}} })/script/body/html运行如下：

我们可以看到，与watch相比，我们没有在data中定义fullName数据，而是直接在computed属性中定义fullName，然后返回firstName和lastName的拼接结果。当页面呈现时，从输出结果可以看出属性将被计算一次。当我们更改时间数据时：

可以看出，计算中的方法还没有被调用。当我们更改名字或姓氏的数据时，结果如下：

从上面的结果可以看出，调用了computed中的方法，这是期望的结果。当与全名相关的名字和姓氏数据发生变化时，将重新计算计算出的属性。当与全名无关的时间数据发生变化时，将使用以前缓存的数据，这是期望的结果。

对比以上三种方法，可以知道methods方法是最不理想的，listener watch和computed方法运行结果相同，但computed方法更简单。因此，当监视方法和计算方法都可以实现时，我们建议使用计算方法。

但是上面两种watch和computed的方法都存在一个问题，就是在watch中，我们在data中定义了一个fullName数据，当我们改变fullName的值时，DOM也会随之改变，这和firstName和lastName数据改变是一样的。但是当我们在计算中没有定义全名时，当我们更改全名的数据时，它如下：

我们发现DOM没有更新，和watch相比很不友好。事实上，在computed中有两个属性，get和set，我们的computed fullName方法更改如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title Vue/title script src=' http :3359 cdn . jsdeliver . net/NPM/Vue '/script/head dydiv id=' app ' p { { full name } } { { Time } }/p/div script var app=new Vue({ El : ' # app '，data: { firstName: ' hello '，lastName:返回this . first name ' ' this . last name；}，set(value){ console . log(value)；var result=value . split(')；this.firstName=结果[0]；this.lastName=结果[1]；} } } })/脚本/正文/html运行如下：

可以看到，当我们获取和设置时，可以改变fullName的值来更新DOM。当页面更新时，首先触发fullName中的get方法，然后返回fullName。当我们改变时间时，全名所依赖的名字和姓氏没有改变，因此全名将获取缓存的值。您可以在fullName的set方法中传递一个值参数。通过打印，我们可以看到该值是我们直接更改fullName的值，这样我们就可以赋值来更改firstName和lastName，这样当fullName所依赖的firstName或lastName发生变化时，DOM就会实时更新。

以上是边肖介绍的Vue进阶之路的详细讲解和整合，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！