vue的那些事儿

callmeCassie

已于 2022-07-23 17:15:20 修改

阅读量673

点赞数

分类专栏： vue 文章标签： vue

于 2020-09-13 19:24:42 首次发布

本文链接：https://blog.csdn.net/callmecassie/article/details/107290305

版权

vue 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

1.Invalid prop: type check failed for prop “xxx”. Expected , got Array

一般出现上面的报错是因为后台返回的数据和前端定义的数据类型不一致，但有时候也会出现数据类型正确还是报错，最好是在子组件的prop里写明type和default

options: {
	type: Array,
	default: []
}

2.Invalid default value for prop “value”: Props with type Object/Array must use a factory funtion to return the default value.

上面的告警是说"对于Object/Array类型的属性在设置默认值时必须使用工厂函数的方式提供"

props: {
	title: {
		type: String,
		default: ''
	},
	obj: {
		type: Object,
		default: {}
	},
}

对于String类型采用key-value的方式提供default值是没啥影响，不过对Object类型就会有影响，不过这种影响也只是一种警告，不会导致界面出错，并且这种警告是建立在文件对语法配置的策略之上。

props: {
	obj: {
		type: Object,
		default: () => ({}),
		// 等同于() => (return {})
		// 不可写成() => {},因为对象的大括号会被解释为函数体的大括号,被当成函数主体
		// 小括号包含大括号才是对象的定义
	},
}
// 或者
props: {
	obj: {
		type: Object,
		default() {
			return {}
		}
	},
	arr: {
		type: Array,
		default: function() {
			return []
		}
	},
}

3.this.$set(this.obj, ‘e’,0)

在vue实例创建后，往data对象里添加新的属性(该属性没有出现在data中，是过程中往data里添加)到实例上，是不会触发视图更新的。
有时你想向已有对象上添加一些属性，例如使用 Object.assign() 或 _.extend() 方法来添加属性。但是，添加到对象上的新属性不会触发更新。在这种情况下可以创建一个新的对象，让它包含原对象的属性和新的属性。使用Vue.$set()

4.data使用return返回

data两种写法

// 1.在简单的vue实例中看到的Vue实例中data属性
let app= new Vue({
    el:"#app",
    data:{
        msg:''
    },
    methods:{}
})

// 2、在使用组件化的项目中：
export default{
    data(){
        return {
　　　　　　　msg: 'hello vue',
            user:'',
        }
    },
    methods:{}
}

不使用return包裹的数据会在项目的全局可见，会造成变量污染；
使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。

当一个组件被定义， data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象，JS中直接共享对象会造成引用传递，如果修改了某个值，所有的引用也会跟着修改，这会造成了数据污染！通过提供 data 函数，在实例化组件的时候只是调用了这个函数生成的数据副本，这就避免了数据污染。（参考资料）

5.$nextTick()的妙用

应用场景：在视图更新后，基于新的视图进行操作，如在created，mounted阶段，如果需要操作渲染后的视图，就需要使用nextTick方法，你可以把它类似地当成setTimeout来使用（高手请看我）

 created(){
    let that=this;
    that.$nextTick(function(){  //不使用this.$nextTick()方法会报错
        that.$refs.aa.innerHTML="created中更改了按钮内容";  //写入到DOM元素
    });
  },

6.父子组件使用props时的数据流向

vue中父子组件通信最常用的方式是props和$emit，通常来说，父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

但是当父组件的传值是数组或者对象时，子组件中不仅能够直接修改，还不会报错，在子组件中改变这个对象或数组本身将会影响到父组件的状态。

原理：对象和数组属于引用数据类型，是存放在堆空间的，在栈空间中只是保留了对象的引用地址。

var name = '李四'
var age = 22
var chlidrenData = {
  name: '李四',
  age: 22
}
var newchlidrenData = chlidrenData

在这里插入图片描述
当 JavaScript 需要访问该数据的时候，是通过栈中的引用地址来访问的，所以，父组件传递给子组件的，实际上只是一个引用地址，当子组件修改这个对象时，是真的修改了在堆空间中保存的数值，当然父组件中的值也会发生变化，但是引用地址没有进行修改，所以并没有报错。

7.解决v-for中遍历多个el-select时，下拉选择框同步选择问题（详情点击）

当v-for遍历多个el-select时，由于v-model绑定的值为同一个，导致下拉选择时多个下拉选择框同步选择问题
在这里插入图片描述

解决办法：为el-select绑定不同的v-mode值，将v-for传递的index值绑定在v-model的参数上（ v-model=“seatValue[index]” ）
在这里插入图片描述
以下面试题摘自https://blog.csdn.net/Elementsboy/article/details/105669347

8.在使用计算属性的时，函数名和data数据源中的数据可以同名吗？

不可以，同名会报错：The computed property "xxxx" is already defined in data

初始化vm的过程，会先把data绑定到vm,再把computed的值绑定到vm，会把data覆盖了。
可以同名，但data会覆盖methods。并且本就不该同名，同名说明你命名不规范。
写在计算属性中的数据名称，不能在data中定义,因为不管是计算属性还是data还是props 都会被挂载在vm实例上，因此这三个都不能同名。

然后解释为什么会覆盖，因为Props、methods、data、computed、watch都是在initState函数中被初始化的。初始化顺序就是我上面给出的顺序，本质上这些都是要挂载到this上面的，你如果重名的话，后面出现的属性自然而然会覆盖之前挂载的属性了。如果你的eslint配置比较严格的话，同名是编译不通过的。

9.怎么给vue定义全局的方法？

– 通过prototype，Vue.prototype[method]=method;
– 通过插件Vue.use(plugin)；
– 通过mixin，Vue.mixin(mixins);

10.怎么解决vue动态设置img的src不生效的问题？

因为动态添加src被当做静态资源处理了，没有进行编译，所以要加上require。require(’@/assets/images/xxx.png’)

11.给change事件添加自定义参数

@change="handleChange($event, '自定义参数')" // $event是change事件自带的参数，为该选中项的信息

12.vue挂载方式

挂载：构造 DOM 元素然后塞入页面的过程称为组件的挂载

var MyComponent = Vue.extend({
  template: '<div>Hello!</div>'
})

// 创建并挂载到 #app (会替换 #app)
new MyComponent().$mount('#app')

// 同上
new MyComponent({ el: '#app' })

// 或者，在文档之外渲染并且随后挂载
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)