Vue路由

嵌套路由

<router-view>是用来渲染通过路由映射过来的组件，当路径更改时，<router-view>中的内容也会发生更改

// 一级路由
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar },
  { path: '*', redirect: "/foo"},
]
// 嵌套路由
<div id="app">
  <p>
    <router-link to="/" >index</router-link>
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <router-view></router-view>
</div>

const Home = { template: '<div>home</div>' }
const Foo = { template:
  <div>
    <p>
      <router-link to="/foo/foo1">to Foo1</router-link>
      <router-link to="/foo/foo2">to Foo2</router-link>
      <router-link to="/foo/foo3">to Foo3</router-link>
    </p>
    <router-view></router-view>
  </div>
}
const Bar = { template: '<div>bar</div>' }
const Foo1 = { template: '<div>Foo1</div>' }
const Foo2 = { template: '<div>Foo2</div>' }
const Foo3 = { template: '<div>Foo3</div>' }

watch和computed的区别

computed

​ 计算属性基于 data 中声明过或者父组件传递的 props 中的数据通过计算得到的一个新值，这个新值只会根据已知值的变化而变化，

简言之：这个属性依赖其他属性，由其他属性计算而来的。

<p>姓名：{{ fullName }}</p>
... ...
data: {
    firstName: 'David',
    lastName: 'Beckham'
},
computed: {
    fullName: function() { //方法的返回值作为属性值
            return this.firstName + ' ' + this.lastName
    }
}

watch

​ 通过 vm 对象的 $watch() 或 watch 配置来监听 Vue 实例上的属性变化，或某些特定数据的变化，然后执行某些具体的业务逻辑操

作。当属性变化时，回调函数自动调用，在函数内部进行计算。

watch: {
    // 监听data中的firstName，如果发生了变化，就把变化的值给data中的fullName，val就是firstName的最新值
    firstName: function(val) { 
        this.fullName = val + ' ' + this.lastName
    },
    lastName: function(val) {
        this.fullName = this.firstName + ' ' + val
    }    
}

总结：

​ watch和computed都是以Vue的依赖追踪机制为基础的，当某一个依赖型数据（依赖型数据：简单理解即放在data等对象下的实例

数据）发生变化的时候，所有依赖这个数据的相关数据会自动发生变化，即自动调用相关的函数，来实现数据的变动。

应用场景：

computed：用于处理复杂的逻辑运算；一个数据受一个或多个数据影响；用来处理watch和methods无法处理的，或处理起来不方

便的情况。处理模板中的复杂表达式、购物车里面的商品数量和总金额之间的变化关系等。

watch：用来处理当一个属性发生变化时，需要执行某些具体的业务逻辑操作，或要在数据变化时执行异步或开销较大的操作；一个

数据改变影响多个数据。用来监控路由、inpurt 输入框值的特殊处理等。

区别：

computed

（1）初始化显示或者相关的data、props 等属性数据发生变化的时候调用；

（2）计算属性不在data中，它是基于data或props中的数据通过计算得到的一个新值，这个新值根据已知值的变化而变化；

（3）在computed属性对象中定义计算属性的方法，和取data对象里的数据属性一样，以属性访问的形式调用；

（4）如果computed属性值是函数，那么默认会走get 方法，必须要有一个返回值，函数的返回值就是属性的属性值；

（5）computed属性值默认会缓存计算结果，在重复的调用中，只要依赖数据不变，直接取缓存中的计算结果，只有依赖型数据发生改

变，computed才会重新计算；

（6）在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

watch

（1）主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作，可以看作是computed和methods的结合体；

（2）可以监听的数据来源：data，props，computed内的数据；

（3）watch支持异步；

（4）不支持缓存，监听的数据改变，直接会触发相应的操作；

（5）监听函数有两个参数，第一个参数是最新的值，第二个参数是输入之前的值，顺序一定是新值，旧值。