🍈

Vue 相关

Created

Nov 22, 2022 07:35 AM

Tags

Vue 实现双向绑定的原理？

通过 Object.defineProperty() 方法重新定义了对象获取属性值（get）和设置属性值（set）的操作来实现的：

Object.defineProperty() 有三个参数：操作对象、定义或修改的对象属性名、属性描述符，其中属性描述符是一个对象，有两种形式：数据描述符、存取描述符。


var obj = {};
var name;

Object.defineProperty(obj, 'data', {
	get: function (){
		return name;
	},
	set: function (val){
		name = val;
	}
})

obj.data = 'abc';
console.log(obj.data);

理解data更新，view视图层是如何更新的：view更新，要data改变只要进行事件监听即可，利用 Object.defineProperty() 对属性设置的set函数，改变data数据就会触发set函数，在这个函数里面添加更新view视图层的方法即可。

Vue 组件之间如何传值？

父传子

先在父组件中绑定变量
再在子组件中添加props属性接收父组件传递过来的变量
最后就可以在子组件中使用Mustache插值语法表示父组件中的变量值

子传父

先在子组件中绑定事件@change=”setChild”，触发的时候在setChild事件中用$emit()触发父组件中的函数，并将子组件中的变量作为参数传递
再在父组件中绑定事件<child @transparent=”getChild”></child>，当子组件触发这个事件时，就可以调用getChild方法获取到传递过来的参数


methods: {
	sendChild: function(){
		this.$emit('transparent', this.msg)
	}
}

methods: {
	getChild: function(msg){
		this.user = msg;
	}
}

兄弟组件互传


// 通过vuex状态管理传值
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);
const state = { name: 'lewis' };
const mutations = {
	newName(state, message){
		state.name = message;
	}
}

export default new Vuex.Store({ state, mutations })

Vue 的生命周期有哪些？