我的

vue开发过程中遇到过什么问题？怎么解决的

1、曾经尝试给data中定义的对象身上添加属性，实际改变了数据但是没有触发视图更新。

data(){
    return {
        person:{
            name:'小明'
        }
    }
  },
  watch:{},
  computed:{},
  methods:{
      addPro(){
          this.person.age = 10;
            //解决办法
          this.$set(this.person,'age',10)
      }
  },
//为什么会这样呢？当去查对应文档时，你会发现响应系统 ,
//把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项，
//Vue 将遍历它的属性，用 Object.defineProperty 
//将它们转为 getter/setter,如上示例，将data在控制台打印出来会发现：

2、我需要监听一个搜索框的内容，当内容为空的时候搜索按钮消失，输入内容的时候搜索按钮显示

<el-input v-model="input" placeholder="请输入内容"></el-input>
<el-button type="primary" v-show='showTree' disabled>搜索</el-button>

data(){
    return {
        aucarid:'',
        showTree:false
    }
},
watch: {
    aucarid(n, o) {
      if (n == "") {
          //如果输入框的内容为空，搜索按钮隐藏
        this.showTree = false;
      }else{
        this.showTree = true;
    }
  },

更多watch用法看这里https://www.cnblogs.com/shiningly/p/9471067.html

3、使用了keep-alive缓存组建之后 生命周期created mounted钩子函数再次进入页面不会调用

<el-main>
 <!-- <transition name="fade"> -->
   <keep-alive>
     <router-view v-if="$route.meta.keepAlive"></router-view>
   </keep-alive>
   <router-view v-if="!$route.meta.keepAlive"></router-view>
 <!-- </transition> -->
</el-main>

路由

            {
                path: '/home/baseInfo',
                name: 'BaseInfo',
                component: resolve => require(['@/views/car/baseInfo.vue'], resolve),
                meta: {
                    keepAlive: true // 需要被缓存
                }
            },

当我们缓存组建以后，组建内的生命周期钩子函数就不会再次调用了，会被调用的之后两个deactivated(){ },activated() {}

如果想在进入页面或者离开页面进行什么操作的话就得在这两个钩子函数里面操作了

完整例子https://www.cnblogs.com/sysuhanyf/p/7454530.html

4、定时器写了之后 离开页面定时器还在继续调用

      this.timeOut = setInterval(() => {
        console.log("Ping");
        this.webSockfun.send("Ping");
      }, 5000);
      this.$once("hook:beforeDestroy", () => {
        clearInterval(this.timeOut);
      });

5、当我在使用element-ui的tree组件时，想自定义组件，但是得用jsx语法。

npm install 
    babel-plugin-syntax-jsx 
    babel-plugin-transform-vue-jsx 
    babel-helper-vue-jsx-merge-props 
    babel-preset-es2015 
--save-dev

然后修改最外层的babel配置文件.babelrc为如下内容

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
    }
  }
}