Vue 使用记录分享

Question

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

参考资料