这些也是自己平时项目中遇到过的一些问题,看到有人整理了出来,也就转载保存一下

文章内容总结:

  1. 组件style的scoped
  2. Vue 数组/对象更新 视图不更新
  3. vue filters 过滤器的使用
  4. 列表渲染相关
  5. 深度watch与watch立即触发回调
  6. 这些情况下不要使用箭头函数
  7. 路由懒加载写法
  8. 路由的项目启动页和404页面

组件style的scoped:

问题:在组件中用js动态创建的dom,添加样式不生效。

场景:

    <template>
<div class="test"></div>
</template>
<script>
let a=document.querySelector('.test');
let newDom=document.createElement("div"); // 创建dom
newDom.setAttribute("class","testAdd" ); // 添加样式
a.appendChild(newDom); // 插入dom
</script>
<style scoped>
.test{
background:blue;
height:100px;
width:100px;
}
.testAdd{
background:red;
height:100px;
width:100px;
}
</style>

结果

// test生效   testAdd 不生效
<div data-v-1b971ada class="test"><div class="testAdd"></div></div>
.test[data-v-1b971ada]{ // 注意data-v-1b971ada
background:blue;
height:100px;
width:100px;
}

原因:

<style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素。

它会为组件中所有的标签和class样式添加一个scoped标识,就像上面结果中的data-v-1b971ada

所以原因就很清楚了:因为动态添加的dom没有scoped添加的标识,没有跟testAdd的样式匹配起来,导致样式失效。

解决方式

  • 推荐:去掉该组件的scoped

每个组件的css并不会很多,当设计到动态添加dom,并为dom添加样式的时候,就可以去掉scoped,会比下面的方法方便很多。

  • 可以动态添加style

      // 上面的栗子可以这样添加样式
    newDom.style.height='100px';
    newDom.style.width='100px';
    newDom.style.background='red';

Vue 数组/对象更新 视图不更新

很多时候,我们习惯于这样操作数组和对象:

     data() { // data数据
return {
arr: [1,2,3],
obj:{
a: 1,
b: 2
}
};
},
// 数据更新 数组视图不更新
this.arr[0] = 'OBKoro1';
this.arr.length = 1;
console.log(arr);// ['OBKoro1'];
// 数据更新 对象视图不更新
this.obj.c = 'OBKoro1';
delete this.obj.a;
console.log(obj); // {b:2,c:'OBKoro1'}

由于js的限制,Vue 不能检测以上数组的变动,以及对象的添加/删除,很多人会因为像上面这样操作,出现视图没有更新的问题。

解决方式:

  1. this.$set(你要改变的数组/对象,你要改变的位置/key,你要改成什么value)

    this.$set(this.arr, 0, "OBKoro1"); // 改变数组
    this.$set(this.obj, "c", "OBKoro1"); // 改变对象

如果还是不懂的话,可以看看这个codependemo

  1. 数组原生方法触发视图更新:

Vue可以监测到数组变化的,数组原生方法:

    splice()、 push()、pop()、shift()、unshift()、sort()、reverse()

意思是使用这些方法不用我们再进行额外的操作,视图自动进行更新

推荐使用splice方法会比较好自定义,因为slice可以在数组的任何位置进行删除/添加操作,这部分可以看看我前几天写的一篇文章:【干货】js 数组详细操作方法及解析合集

  1. 替换数组/对象

比方说:你想遍历这个数组/对象,对每个元素进行处理,然后触发视图更新。

   // 文档中的栗子: filter遍历数组,返回一个新数组,用新数组替换旧数组
example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})

举一反三:可以先把这个数组/对象保存在一个变量中,然后对这个变量进行遍历,等遍历结束后再用变量替换对象/数组

并不会重新渲染整个列表:

Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的、启发式的方法,所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

如果你还是很困惑,可以看看Vue文档中关于这部分的解释。


vue filters 过滤器的使用:

过滤器,通常用于后台管理系统,或者一些约定类型,过滤。Vue过滤器用法是很简单,但是很多朋友可能都没有用过,这里稍微讲解一下。

在html模板中的两种用法

    <!-- 在双花括号中 -->
{{ message | filterTest }}
<!-- 在 `v-bind` 中 -->
<div :id="message | filterTest"></div>

在组件script中的用法:

export default {
data() {
return {
message:1
}
},
filters: {
filterTest(value) {
// value在这里是message的值
if(value===1){
return '最后输出这个值';
}
}
}
}

用法就是上面讲的这样,可以自己在组件中试一试就知道了,很简单很好用的。

如果不想自己试,可以点这个demo里面修改代码就可以了,demo中包括过滤器串联过滤器传参

推荐看Vue过滤器文档,你会更了解它的。


列表渲染相关

v-for循环绑定model:

input在v-for中可以像如下这么进行绑定,我敢打赌很多人不知道。

    // 数据
data() {
return{
obj: {
ob: "OB",
koro1: "Koro1"
},
model: {
ob: "默认ob",
koro1: "默认koro1"
}
}
},
// html模板
<div v-for="(value,key) in obj">
<input type="text" v-model="model[key]">
</div>
// input就跟数据绑定在一起了,那两个默认数据也会在input中显示

为此,我做了个demo,你可以点进去试试。

一段取值的v-for

如果我们有一段重复的html模板要渲染,又没有数据关联,我们可以:

    <div v-for="n in 5">
<span>这里会被渲染5次,渲染模板{{n}}</span>
</div>

v-if尽量不要与v-for在同一节点使用:

v-for 的优先级比 v-if 更高,如果它们处于同一节点的话,那么每一个循环都会运行一遍v-if。

如果你想根据循环中的每一项的数据来判断是否渲染,那么你这样做是对的:

    <li v-for="todo in todos" v-if="todo.type===1">
{{ todo }}
</li>

如果你想要根据某些条件跳过循环,而又跟将要渲染的每一项数据没有关系的话,你可以将v-if放在v-for的父节点

    // 根据elseData是否为true 来判断是否渲染,跟每个元素没有关系
<ul v-if="elseData">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
// 数组是否有数据 跟每个元素没有关系
<ul v-if="todos.length">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
<p v-else>No todos left!</p>

如上,正确使用v-for与v-if优先级的关系,可以为你节省大量的性能。


深度watch与watch立即触发回调

watch很多人都在用,但是这watch中的这两个选项deepimmediate,或许不是很多人都知道,我猜。

选项:deep

在选项参数中指定 deep: true,可以监听对象中属性的变化。

选项:immediate

在选项参数中指定 immediate: true, 将立即以表达式的当前值触发回调,也就是立即触发一次。

    watch: {
obj: {
handler(val, oldVal) {
console.log('属性发生变化触发这个回调',val, oldVal);
},
deep: true // 监听这个对象中的每一个属性变化
},
step: { // 属性
//watch
handler(val, oldVal) {
console.log("默认立即触发一次", val, oldVal);
},
immediate: true // 默认立即触发一次
},
},

这两个选项可以同时使用,另外:是的,又有一个demo

还有下面这一点需要注意。


这些情况下不要使用箭头函数:

  • 不应该使用箭头函数来定义一个生命周期方法
  • 不应该使用箭头函数来定义 method 函数
  • 不应该使用箭头函数来定义计算属性函数
  • 不应该对 data 属性使用箭头函数
  • 不应该使用箭头函数来定义 watcher 函数

示例:

    // 上面watch的栗子:
handler:(val, oldVal)=> { // 可以执行
console.log("默认触发一次", val, oldVal);
},
// method:
methods: {
plus: () => { // 可以执行
// do something
}
}
// 生命周期:
created:()=>{ // 可以执行
console.log('lala',this.obj)
},

是的,没错,这些都能执行。

but:

箭头函数绑定了父级作用域的上下文,this 将不会按照期望指向 Vue 实例

也就是说,你不能使用this来访问你组件中的data数据以及method方法了

this将会指向undefined。


路由懒加载写法:

    // 我所采用的方法,个人感觉比较简洁一些,少了一步引入赋值。
const router = new VueRouter({
routes: [
path: '/app',
component: () => import('./app'), // 引入组件
]
})
// Vue路由文档的写法:
const app = () => import('./app.vue') // 引入组件
const router = new VueRouter({
routes: [
{ path: '/app', component: app }
]
})

文档的写法在于问题在于:如果我们的路由比较多的话,是不是要在路由上方引入赋值十几行组件?

第一种跟第二种方法相比就是把引入赋值的一步,直接写在component上面,本质上是一样的。两种方式都可以的,大家自由选择哈。


路由的项目启动页和404页面

实际上这也就是一个设置而已:

    export default new Router({
routes: [
{
path: '/', // 项目启动页
redirect:'/login' // 重定向到下方声明的路由
},
{
path: '*', // 404 页面
component: () => import('./notFind') // 或者使用component也可以的
},
]
})

比如你的域名为:www.baidu.com

项目启动页指的是: 当你进入www.baidu.com,会自动跳转到login登录页。

404页面指的是: 当进入一个没有 声明/没有匹配 的路由页面时就会跳转到404页面。

比如进入www.baidu.com/testRouter,就会自动跳转到notFind页面。

当你没有声明一个404页面,进入www.baidu.com/testRouter,显示的页面是一片空白。

作者:OBKoro1
链接:https://juejin.im/post/5b1230c1f265da6e603933ad
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

vue使用过程中的一些小技巧的更多相关文章

  1. ACM 做题过程中的一些小技巧。

    ACM做题过程中的一些小技巧. 1.一般用C语言节约空间,要用C++库函数或STL时才用C++; cout.cin和printf.scanf最好不要混用. 2.有时候int型不够用,可以用long l ...

  2. ACM做题过程中的一些小技巧

    1.一般用C语言节约空间,要用C++库函数或STL时才用C++; cout.cin和printf.scanf最好不要混用. 2.有时候int型不够用,可以用long long或__int64型(两个下 ...

  3. Vue项目过程中遇到的小问题

    1.给router-link添加点击事件 <router-link to="" @click.native=""></router-link& ...

  4. C语言中的调试小技巧

    C语言中的调试小技巧 经常看到有人介绍一些IDE或者像gdb这样的调试器的很高级的调试功能,也听人说过有些牛人做工程的时候就用printf来调试,不用特殊的调试器.特别是在代码经过编译器一些比较复杂的 ...

  5. jquery获取json对象中的key小技巧

    jquery获取json对象中的key小技巧 比如有一个json var json = {"name" : "Tom", "age" : 1 ...

  6. 使用Mac的过程中的一些小操作

    前言:使用Mac的过程中的一些小操作 查看Mac系统是32位还是64位: 方法1: 点击左上角的苹果按钮->关于本机->概览->系统报告->软件->偏好设置面板:右侧有提 ...

  7. ES6中常用的小技巧,用了事半功倍哦

    ES6中常用的小技巧,如果能在实际项目中能使用到,必定事半功倍: 1. 强制要求参数 ES6提供了默认参数值机制,允许你为参数设置默认值,防止在函数被调用时没有传入这些参数. 在下面的例子中,我们写了 ...

  8. C#中使用swagger小技巧

    C#中使用swagger小技巧 swaggerUI显示的接口内容主要用于开发阶段便于与前端联调,不适合发布到对外的站点. 有以下两种方式,让接口不显示在SwaggerUI中 1.使用属性 [ApiEx ...

  9. Matlab中的一些小技巧

    (转于它处,仅供参考) 1.. Ctrl+C 中断正在执行的操作 如果程序不小心进入死循环,或者计算时间太长,可以在命令窗口中使用Ctrl+c来中断.MATLAB这时可能正疲于应付,响应会有些滞后. ...

随机推荐

  1. RHCSA day5

    4.调整逻辑卷容量 请按照以下要求调整本地逻辑卷lvm1的容量: 调整后的逻辑卷及文件系统大小为770MiB 调整后确保文件系统中已存在的内容不能被破坏 调整后的容量可能出现误差,只要在730MiB ...

  2. ELKStack入门篇(一)之ELK部署和使用

    一.ELKStack简介 1.ELK介绍 中文指南:https://www.gitbook.com/book/chenryn/elk-stack-guide-cn/details ELK Stack包 ...

  3. Entity Framework中执行Sql语句

           如果想在EF框架中执行Sql语句,其实很简单,EF里面已经提供了相关的方法(此处使用的EF为EF4.1版本).        EF中提供了两个方法,一个是执行查询的Sql语句SqlQue ...

  4. 《Node.js 包教不包会》

    <Node.js 包教不包会> 为何写作此课程 在 CNode(https://cnodejs.org/) 混了那么久,解答了不少 Node.js 初学者们的问题.回头想想,那些问题所需要 ...

  5. EOJ3650 转机折扣(26进制,字符串)

    题面 看成26进制,把较小的那个字符串加1 strcmp(s1,s2)s1和s2有大小时,不一定都是返回1或者-1.....这个地方wa了好几次没有发现 #include<bits/stdc++ ...

  6. mybatis按datetime条件查询,参数为时间戳时

    mybatis按datetime条件查询,参数为时间戳时,如果数据库为2018-1-1 20:22:10, 你的时间戳也为2018-1-1 20:22:10,但却没找到数据.可能是时差导致的.百度修正 ...

  7. centos7.2部署docker-17.06.0-ce的bug:Error response from daemon: oci runtime error: container_linux.go:262: starting container process caused "process_linux.go:339: container init caused \"\"".

    现象: 操作系统:centos 7.2 kernel 3.10.0-327.el7.x86_64 mesos:1.3.0 docker:docker-17.06.0-ce 在做mesos验证时,通过m ...

  8. mysql5.5 升级到 5.7 的坑

    1.大概思路,docker 新启一个mysql5.7 端口映射到3307 2. 导出5.5 的.sql文件,导入5.7中 3.测试通过后,可将5.5关闭.5.7端口改回3306 GRANT ALL P ...

  9. java-HttpGetPost-图片字节流上传

    在java程序开发中经常用到与服务端的交互工作,主要的就是传递相应的参数请求从而获取到对应的结果加以处理 可以使用Get请求与Post请求,注意!这里的Get请求不是通过浏览器界面而是在程序代码中设置 ...

  10. ES6的新特性(17)——Generator 函数的异步应用

    Generator 函数的异步应用 异步编程对 JavaScript 语言太重要.Javascript 语言的执行环境是“单线程”的,如果没有异步编程,根本没法用,非卡死不可.本章主要介绍 Gener ...