Watch开启深度监视 1.immediate和handler使用watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。比如当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate设为true。watch: { cityName: { 　　handler(newName, oldName) { 　　// ... 　　}, 　　immediate: true //cityName第一次被赋值时也会执行监听 }2.deep当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。 watch: { cityName: { handler(newName, oldName) { // ... }, deep: true, immediate: true }

Vue同级组件传值$emit,$on //创建总线Vue.prototype.bus = new Vue();//触发 this.bus.$emit('name', value);//监听this.bus.$on('name',callback(value)))

Vue.js父组件$on无法监听子组件$emit触发事件解决办法 将触发事件放在父节点上触发，就可以监听到触发的事件了，即this.$parent.$emit("myclick",this.todo.text);这样即可以在vm.$on监听到触发的事件了。

vue 监听store中的数值变化 computed: { isFollow () { return this.$store.state.demo.id;　　//需要监听的数据 } }, watch: { isFollow (newVal, oldVal) { //do something } },

axios 的封装 // 在http.js中引入axios import axios from 'axios'; // 引入axios import QS from 'qs'; // 引入qs模块，用来序列化post类型的数据，后面会提到 // vant的toast提示框组件，大家可根据自己的ui组件更改。 import { Toast } from 'vant'; //超时时间更改 axios.defaults.timeout = 10000; //修改 POST默认请求头 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; // 先导入vuex,因为我们要使用到里面的状态对象 // vuex的路径根据自己的路径去写 import store from '@/store/index'; // 请求拦截器 axios.interceptors.request.use(     config => {         // 每次发送请求之前判断vuex中是否存在token                 // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况         // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断         const token = store.state.token;         token && (config.headers.Authorization = token);         return config;     },     error => {         return Promise.error(error);     }); // 响应拦截器 axios.interceptors.response.use(     response => {         // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据             // 否则的话抛出错误         if (response.status === 200) {             return Promise.resolve(response);         } else {             return Promise.reject(response);         }     },     // 服务器状态码不是2开头的的情况     // 这里可以跟你们的后台开发人员协商好统一的错误状态码         // 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等     // 下面列举几个常见的操作，其他需求可自行扩展     error => {         if (error.response.status) {             switch (error.response.status) {                 // 401: 未登录                 // 未登录则跳转登录页面，并携带当前页面的路径                 // 在登录成功后返回当前页面，这一步需要在登录页操作。                                 case 401:                     router.replace({                         path: '/login',                         query: {                             redirect: router.currentRoute.fullPath                         }                     });                     break;                     // 403 token过期                     // 登录过期对用户进行提示                     // 清除本地token和清空vuex中token对象                     // 跳转登录页面                                 case 403:                     Toast({                         message: '登录过期，请重新登录',                         duration: 1000,                         forbidClick: true                     });                     // 清除token                     localStorage.removeItem('token');                     store.commit('loginSuccess', null);                     // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面                     setTimeout(() => {                         router.replace({                             path: '/login',                             query: {                                 redirect: router.currentRoute.fullPath                             }                         });                     }, 1000);                     break;                     // 404请求不存在                 case 404:                     Toast({                         message: '网络请求不存在',                         duration: 1500,                         forbidClick: true                     });                     break;                     // 其他错误，直接抛出错误提示                 default:                     Toast({                         message: error.response.data.message,                         duration: 1500,                         forbidClick: true                     });             }             return Promise.reject(error.response);         }     }) /**  * get方法，对应get请求  * @param {String} url [请求的url地址]  * @param {Object} params [请求时携带的参数]  */ export function get(url, params) {     return new Promise((resolve, reject) => {         axios.get(url, {             params: params         }).then(res => {             resolve(res.data);         }).catch(err => {             reject(err.data)         })     }) } /**  * post方法，对应post请求  * @param {String} url [请求的url地址]  * @param {Object} params [请求时携带的参数]  */ export function post(url, params) {     return new Promise((resolve, reject) => {         axios.post(url, QS.stringify(params))             .then(res => {                 resolve(res.data);             })             .catch(err => {                 reject(err.data)             })     }); }