[TOC] ## **1. `watch`属性的使用** ### 1.1 监听`data`中属性的改变：  ~~~ <div id="app"> <input type="text" v-model="firstname"> + <input type="text" v-model="lastname"> = <input type="text" v-model="fullname"> </div> ~~~ ~~~ <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { firstname: '', lastname: '', fullname: '' }, methods: {}, watch: { // 使用这个 属性，可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的 function 处理函数 'firstname': function (newVal, oldVal) { this.fullname = newVal + '-' + this.lastname }, 'lastname': function (newVal) { this.fullname = this.firstname + '-' + newVal } } }); </script> ~~~ 2. 监听路由对象的改变： ~~~ <div id="app"> <router-link to="/login">登录</router-link> <router-link to="/register">注册</router-link> <router-view></router-view> </div> <script> var login = Vue.extend({ template: '<h1>登录组件</h1>' }); var register = Vue.extend({ template: '<h1>注册组件</h1>' }); var router = new VueRouter({ routes: [ { path: "/login", component: login }, { path: "/register", component: register } ] }); // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: {}, methods: {}, router: router, watch: { '$route.path'': function (newVal, oldVal) { if (newVal.path === '/login') { console.log('这是登录组件'); } } } }); </script> ~~~ ## **2.`computed`计算属性的使用** ### **使用computed的计算值，给子组件传值（多方计算得到），在vuex中解决axios异步加载问题** * **这个 function 内部，所用到的 任何 data 中的数据发送了变化，就会 立即重新计算 这个 计算属性的值** * 计算属性的求值结果，会被缓存起来，方便下次直接使用；**如果 计算属性方法中，所以来的任何数据，都没有发生过变化，则，不会重新对 计算属性求值** ``` computed: { fullName() { return this.firstName + ' - ' + this.lastName; } ``` **firstName和this.lastName任何一个值发生变化都会引起fullName的重新计算，** 可以说computed比watch监控的个数多 **1. 默认只有`getter`的计算属性：** ~~~ <div id="app"> <input type="text" v-model="firstName"> + <input type="text" v-model="lastName"> = <span>{{fullName}}</span> </div> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { firstName: 'jack', lastName: 'chen' }, methods: {}, computed: { // 计算属性； 特点：当计算属性中所以来的任何一个 data 属性改变之后，都会重新触发 本计算属性 的重新计算，从而更新 fullName 的值 fullName() { return this.firstName + ' - ' + this.lastName; } } }); </script> ~~~ **2. 定义有`getter`和`setter`的计算属性：** 当对计算值赋值的时候，会调用computed的set方法（赋值会传递给set方法） 例如：fullName就是计算值，firstName和lastName可以理解为监控值，都是data的属性 ``` fullName() { return this.firstName + ' - ' + this.lastName; } ``` 完整实例 ~~~ <div id="app"> <input type="text" v-model="firstName"> <input type="text" v-model="lastName"> <!-- 点击按钮重新为 计算属性 fullName 赋值 --> <input type="button" value="修改fullName" @click="changeName"> <span>{{fullName}}</span> </div> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { firstName: 'jack', lastName: 'chen' }, methods: { changeName() { this.fullName = 'TOM - chen2'; //调用计算值的set方法，因为是赋值操作 } }, computed: { fullName: { get: function () { return this.firstName + ' - ' + this.lastName; }, set: function (newVal) { var parts = newVal.split(' - '); this.firstName = parts[0]; this.lastName = parts[1]; } } } }); </script> ~~~ ## 3. **`watch`、`computed`和`methods`之间的对比** watch监控一个值的变化，computed 监控其他的相关值得变化，重新计算这个值，例如 c= a + b ,a和b发生变化，那就要重新计算c 1. `computed`属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用； 2. `methods`方法表示一个具体的操作，主要书写业务逻辑； 3. `watch`一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是`computed`和`methods`的结合体； ## 4. 坑 **=>箭头表达式获取不到this对象引用的值** ~~~ props: ['vcaInstance', 'queryKeyAlgorithms', 'algorithm'], watch: { 'algorithm.name': (newAlgorithm, oldAlgorithm) => { //监控下拉选值变化 console.log("算法改变了" + newAlgorithm); let algorithms = this.queryKeyAlgorithms; for(let i=0; i < algorithms.length; i++){ if(algorithms[i].name === newAlgorithm) { this.algorithm.zacou = algorithms[i].sub.hashAlgoName; } } }, }, ~~~  **function匿名函数this指向运行时实际调用该方法的对象。** **\=>没有自己的this，这里this在编写时已经确定**。 改成function解决 ~~~ watch: { 'algorithm.name': function(newAlgorithm, oldAlgorithm){ //监控下拉选值变化 console.log("算法改变了" + newAlgorithm); let algorithms = this.queryKeyAlgorithms; for(let i=0; i < algorithms.length; i++){ if(algorithms[i].name === newAlgorithm) { this.algorithm.zacou = algorithms[i].sub.hashAlgoName; } } }, }, ~~~ ## **4. `nrm`的安装使用** 作用：提供了一些最常用的NPM包镜像地址，能够让我们快速的切换安装包时候的服务器地址；什么是镜像：原来包刚一开始是只存在于国外的NPM服务器，但是由于网络原因，经常访问不到，这时候，我们可以在国内，创建一个和官网完全一样的NPM服务器，只不过，数据都是从人家那里拿过来的，除此之外，使用方式完全一样； 1. 运行`npm i nrm -g`全局安装`nrm`包； 2. 使用`nrm ls`查看当前所有可用的镜像源地址以及当前所使用的镜像源地址； 3. 使用`nrm use npm`或`nrm use taobao`切换不同的镜像源地址；