[Vue]Vue使用记录

[cookiepool]

1、使用vue-router的全局钩子beforeEach时发现刷新页面和输入地址不会触发，但是切换不同地址的页面却可以

在main.js中使用beforeEach时一定要在这个代码之前使用：

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

我最开始在这个代码之后使用了beforeEach，所以刷新页面没有触发钩子。

2、vue-router里面的滚动行为。

在使用vue/cli 3创建的项目中引入的router，默认情况下回记录页面的滚动距离，就会出现一个问题，那就是从一个页面跳转到另一个页面会记录滚动位置，而不是在页面顶端，如下图演示所示：

这里要想去另外一个页面保持在顶端，最简单的做法就是在实例化router对象时加上滚动行为，加上这个代码即可：

  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  }

参考一下官方教程就知道怎么做了

3、关于ref属性

当我们在普通元素上使用ref属性时，比如这样：

<div ref="two" class='head_nav flex_btn_center'>
  内容。。。
</div>

此时去调用this.$refs.two返回的是DOM对象。当在组件上使用ref时，比如这样：

<app-header ref="one" :title="'我的徒弟'"></app-header>

此时去调用this.$refs.one返回的是一个Vue对象，包含这个组件的data这些属性。大概长这个样子：

4、v-model的小技巧

这个其实vue官方文档有，只是没阅读到上面去，看了位大佬的文章才知道，其实vue官方文档写的很好，很多问题其实文档都已经指出来了，看来有时间还是好好看看。

• v-model.number
  默认情况下我们在input上面输入的值返回的都是字符串类型，如果想得到数值类型，这里其实可以直接使用vue官方的方法一步到位，不用自己傻傻的去再转换一次，代码如下：

<h4>使用v-model.number可以把输入的值转换成number类型，默认它是string</h4>
<input type="number" v-model.number="numberVal" @change="handleChange">

• v-model.trim
  有时候用户不注意或者故意在输入内容的前后加些无用的空格（当然你的项目需要保留这个另当别论），我们可以在用户输入后及时处理掉空格：

<h4>去掉用户输入的开始和结尾的空格v-model.trim</h4>
<input type="text" v-model.trim="userVal" @change="handleChange2">

5、修改数组的时候响应式失效了

有时候你发现通过数组的索引去修改一个值时数据并没有及时的响应到view上，感觉就像修改失败了一样，发现也没有报错（实际上是修改了的）。这个在vue官方文档上也有讲，这里不细说，传送门。首先我先贴出我的演示代码：

<h3>响应式失效演示</h3>
<ul>
    <li v-for="item in list">{{ item }}</li>
</ul>
<hr>
<button @click="changeData">修改-1</button>

data() {
    return {
        list: [0, 1, 2, 3, {haha: 'hahahaha'}],
    }
},

changeData() {
    this.list[0] = 10;
},

当我点击按钮是发现页面并没有改变。然后我修改一下点击函数的代码。

changeData() {
    this.list[0] = 10;
    this.list[4].haha = 'nope'  // 多加一句这个
},

上面我多加了句，发现又可以了，这就是为啥你的项目里面有时候改数组可以响应，有时候又不行。
那么单独修改那种数组有没有解决方法，当然有，如下：

// 这个方法可以做到及时响应
this.$set(this.list, 0, 10); // 修改值，参数说明：修改的数组->要修改的值对应的索引->你要改上去的值
this.list.splice(0, this.list.length); // 修改长度（清空数组）

参考资料
参考资料

6、在最新的Vue脚手架工具下（3.x以上）使用2.x脚手架使用的目录

在安装好最新的vue脚手架情况下，使用以下命令来安装一个额外工具：

npm install -g @vue/cli-init

---

之后就可以使用以下命令生成老的项目目录：

vue init webpack 项目名

---

7、vue里面路由的路由守卫的beforeRouteEnter的钩子函数无法获取到vue实例（this）

这个在官方文档上也有讲到，我在这里贴一下，beforeRouteEnter这个钩子函数里不能直接使用this来获取vue实例，否则报undefined错误，解决方法如下：

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当钩子执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}
//以上为解释。以下为解决方法
beforeRouteEnter(to, from, next){ 
    next((vm)=>{
        console.log(vm);
        if(from.path == '/'){
            vm.isShowAppr = false;
        }
    });
},

8、Vue父组件下的子组件强制重新加载数据

父组件下的子组件的内容默认情况不会强制刷新（主要是利用history返回到这个页面（父组件页面带有缓存的情况）的情况下），实现方法入下。

//data中定义一个变量
isReload: false

//子组件处用v-if来判断是否重新渲染
<app-child v-if="isReload"></app-child>

//使用watch来监听父组件里面会发生变化的变量，如从后端返回的数据user
watch: {
    user(){
        this.isReload = false;
        this.$nextTiock(() => {
            this.isReload = true;
        })
    }
}

9、vue css样式里面使用scoped的坑

在使用了scoped的关键字后会出现css样式覆盖不生效的情况，比如：
使用了v-html注入一段代码<span class="style-color">爱爱爱</span>，在当前页面写有样式：

  .style-color: {
    color: #fff;
  }

上述情况并不会生效，因为scoped情况下为类添加了一个类似[data-v-1ad6e6f7]特殊字符来保障唯一性。
解决方法就是：在static或者public的公告css样式文件下来写样式，这样不会注入特殊关键字符

10、子组件的props监听问题

一般情况下，我们在获取到父组件传来的props属性值时，我们都会把它存进data中，像这样：

  props: {
    popShow: Boolean
  },
  data() {
    return {
      isShow: this.popShow
    }
  }

但是有个问题就是，当父组件的popShow发生变化是，子组件不能检测到数据变化，所以我们需要这样用computed来做处理：

  computed: {
    isShow() {
      return this.popShow;
    }
  },

这个无法检测仅限基本数据类型，如布尔、数字、字符串这些，如果是对象，你不额外的监听，也会有变化，因为对象类型的数据是引用，是浅拷贝。

参考资料

11、Vue里面重置组件的Data为初始状态

Object.assign(this.$data, this.$options.data());

在vue中：

• this.$data 获取当前状态下的data
• this.$options.data() 获取该组件初始状态下的data

当然，如果你只想重置data中的某一个对象或者属性：

this.form = this.$options.data().form

参考资料