Vue中一些需要注意的点（采坑）

前言：记录在学Vue中需要注意的问题

1.给link添加事件、给组件绑定原生事件

在vue-router1中使用v-link写入路由，但是在vue-router2中要使用router-link写入路由，在浏览器渲染的时候会把router-link渲染成a。

有时候需要为router-link注册事件，对于一般的html元素，直接使用@click="eventFun"即可，但是对于router-link，像普通html元素那样注册事件后并不管用，需要添加.native才会成功注册。

事实上给组件绑定原生事件就需要.native修饰v-on，否则无法注册成功。

<my-component v-on:click.native="doTheThing"></my-component>

错误事例：

<el-inputplaceholder="请输入特定消费金额 " @mouseover="test()"></el-input>

<router-link:to="item.menuUrl" @click="toggleName=''"></router-link>

2.修改prop中的数据

每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了，Vue 会在控制台给出警告。

在两种情况下，我们很容易忍不住想去修改 prop 中数据：
Prop 作为初始值传入后，子组件想把它当作局部数据来用；
Prop 作为原始数据传入，由子组件处理成其它数据输出。

对这两种情况，正确的应对方式是：

定义一个局部变量，并用 prop 的值初始化它：

props: ['initialCounter'],

data: function () {

return { counter: this.initialCounter }

}

定义一个计算属性，处理 prop 的值并返回：

props: ['size'],

computed: {

normalizedSize: function () {

return this.size.trim().toLowerCase()

}

3.我需要遍历的数组值更新了,值也赋值了,为什么视图不更新？

因为有局限性啊,官方文档也说的很清楚，一般我们常用的手段是使用:this.$set(obj,item,value)

官方文档如下：

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength

为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将触发状态更新：

// Vue.set

Vue.set(example1.items, indexOfItem, newValue)

// Array.prototype.splice

example1.items.splice(indexOfItem, 1, newValue)

为了解决第二类问题，你可以使用 splice ：

example1.items.splice(newLength)

还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除，对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。

但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。例如，对于：

var vm = new Vue({

data: {

userProfile: {

name: 'Anika'

}

})

你可以添加一个新的 age 属性到嵌套的 userProfile 对象：

Vue.set(vm.userProfile, 'age', 27)

有时你可能需要为已有对象赋予多个新属性，比如使用 Object.assign() 或 _.extend() 。

在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性，不要像这样：

Object.assign(this.userProfile, {

age: 27,

favoriteColor: 'Vue Green'

})

你应该这样做：

this.userProfile = Object.assign({}, this.userProfile, {

age: 27,

favoriteColor: 'Vue Green'

})

4.建议尽可能在使用 v-for 时提供 key

</div>

它是 Vue 识别节点的一个通用机制，key 并不与 v-for 特别关联，key 还具有其他用途，我们将在后面的指南中看到其他用途，后续补充

（2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。）

5.路由模式改为history后,除了首次启动首页没报错,刷新访问路由都报错

必须给对应的服务端配置查询的主页面..也可以认为是主路由入口的引导。。。Vue-Router官方文档链接

（https://router.vuejs.org/zh-cn/essentials/history-mode.html）包括动态路由匹配、向路由组件传递props等基础知识

6.Uncaught ReferenceError: xxx is not define

实例内的 data 对应的变量没有声明
你导入模块报这个错误,那绝逼是导出没写好

7.Error in render function:"Type Error: Cannot read property 'xxx' of undefined"

这种问题大多都是初始化的姿势不对;
比如引入echart这些...仔细去了解下生命周期,再来具体初始化;
vue 组件有时候也会(嵌套组件或者 props传递初始化)..也是基本这个问题

8.Failed to mount component: template or render function not defined

组件挂载失败,问题只有这么几个
组件没有正确引入; 挂载点顺序错了了;
自行动手排查

9.[Vue warn]: Error in render function: "TypeError: Cannot read property '0' of undefined"

想将seller传递给子组件使用，但是我们ajax获取数据是异步过程，也就是说一开始在初始化seller时是空对象，所以把此时的seller传给header就是undefined

使用v-if可以解决报错问题，和created为空问题

【详解vue2父组件传递props异步数据到子组件的问题】【http://www.jb51.net/article/117447.htm】

10.vue-cli 新建项目缺少dev-server.js和dev-client.js , 怎么模拟数据

在使用vue开发过程中，难免需要去本地数据地址进行请求，而原版配置在dev-server.js中，新版vue-webpack-template已经删除dev-server.js，改用webpack.dev.conf.js代替，所以配置本地访问在webpack.dev.conf.js里配置即可。

//首先
const express = require('express')
const app = express()
var appData = require('../data.json')
var seller = appData.seller
var goods = appData.goods
var ratings = appData.ratings
var apiRoutes = express.Router()
app.use('/api', apiRoutes)//找到devServer,添加
before(app) {app.get('/api/seller', (req, res) => {res.json({// 这里是你的json内容errno: 0,data: seller})}),app.get('/api/goods', (req, res) => {res.json({// 这里是你的json内容errno: 0,data: goods})}),app.get('/api/ratings', (req, res) => {res.json({// 这里是你的json内容errno: 0,data: ratings})})
}

11.[WDS] Errors while compiling. Reload prevented.

有一种错误的原因是import的路径不对

import header from '@views/header/header.vue'

12.应当避免在模板或计算属性中使用 $refs

$refs 只在组件渲染完成后才填充，并且它是非响应式的。它仅仅是一个直接操作子组件的应急方案——应当避免在模板或计算属性中使用 $refs

会保持更新

Vue中一些需要注意的点（采坑）相关推荐

vue中使用keepAlive组件缓存遇到的坑
项目开发中在用户由分类页category进入detail需保存用户状态,查阅了Vue官网后,发现vue2.0提供了一个keep-alive组件. 上一篇讲了keep-alive的基本用法,现在说说遇到 ...
在Vue中使用vant的方法，踩坑in ./node_modules/vant/es/dialog/Dialog.js
步骤一:使用npm安装vant npm install vant -force 因为可能会产生依赖冲突,所以一般会在后面加上 -f 强制执行步骤二:导入vant包在Vue项目的main.js文件中 ...
vue mui html不解析,记下Vue中使用Mui.js踩到的坑
1. mui.js 推荐全局引用 Mui的css,js以及扩展js,推荐在main.js全局引用即可,千万不要再在子组件中重复引用,虽然不会报错但是某些插件的返回结果会有意向不到的后果,比如numb ...
Vue中使用高德地图（vue-amap）的采坑记录小白入门
这里写目录标题写在开始 step.1 安装组件 step.2 引入组件 step.3注册高德高德开发者账号,申请KEY step.4 正式使用写在开始俗话说授人以鱼不如授人以渔,直接记录代码的话 ...
vue中如何使用mockjs摸拟接口的各种数据
mockjs的作用生成模拟数据模拟 Ajax 请求,返回模拟数据基于 HTML 模板生成模拟数据(后续更新) 帮助编写单元测试(后续更新) Vue 中使用 mock 有两种使用方式,一种是仅编写 ...
vue2.0怎么渲染html,vue采坑之——vue里面渲染html 并添加样式
在工作中,有次遇到要把返回的字符串分割成两部分,一部分用另外的样式显示. 这时候,我想通过对得到字符串进行处理,在需要特别样式的字符串片段用html标签(用的span)包裹起来再通过变量绑定就好了.不 ...
three、vue中使用three、three怎么加载obj模型和mtl文件、three自定义800*800大小怎么拾取/点击
以上都是这一个星期碰到的坑,找了很多很多资料,总结归纳一下,希望对你的项目有一点点帮助先说说需求 1.加载3D模型 2.点击模型的子模型会显示对于子模型名称 3.不全屏展示,还要点击子模型 4.创建 ...
苹果ajax跨域,vue中解决axios跨域问题【ajax在vue中的应用】
兴冲冲的开始用vue封装组件.自定义指令之后,开始实战.诶,等等,貌似少了--ajax交互? 好吧大致研究了一下axios,但是存在以下两个问题: 1.跨域问题 2.数据格式问题跨域信息示例: Fa ...
怎么将vue模板转换为html,vue中自定义html文件的模板
如果默认生成的 HTML 文件不适合需求,可以创建/使用自定义模板. 一是通过 inject 选项,然后传递给定制的 HTML 文件.html-webpack-plugin 将会自动注入所有需要的 C ...

Vue中一些需要注意的点（采坑）

Vue中一些需要注意的点（采坑）相关推荐

最新文章

热门文章