Vue2 优化
layout: post
title: sync修饰符的作用
tags: vue 双向绑定
categories: vue
一. .sync语法糖
visible.sync和v-if、v-show
visible.sync：双向绑定值。
初始情况下通过该值控制 dialog显示。dialog关闭的时候，element自动设置该值为false。
当子组件执行 close 事件的时候，不仅改变了自己内部的 isShow 的值，而且还将 父组件的 visible的状态发生了改变.
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
1.sync修饰符的作用
. 主要用于解决子组件修改父组件数据无效的问题。
. 我们可以把它理解为用于组件间通信:通俗来说就是子组件触发(this.$emit("update:money",data))一个修改父组件数据的事件，并且传递一个参数；然后父组件监听(von:update:money="totalMoney=$event")这个事件并且根据子组件传给的这个参数修改对应的数据，从而实现子组件可以修改父组件数据的目的。
<template>
<div>
<!-- 父组件 -->
<parent :foo.sync="foo" />
<!-- 等同于 -->
<parent :foo="foo" @update:foo="foo = $event" />
</div>
</template>
<script>
export default {
data() {
return {
foo: "", //父组件需要向子组件传递的参数
};
},
};
</script>
<script>
export default {
// 子组件使用props接收
props: {
foo: {
type: String,
default: "",
},
},
methods:{
// 通过$emit更新父组件的foo的值
change(){
this.$emit("update:foo",'更新')
}
}
};
</script>
二. 多级组件传参数变量样式穿透
1. v-bind="$props": 可以将父组件的所有props下发给它的子组件,子组件需要在其props:{} 中定义要接受的props。
2、v-bind="$attrs": 将调用组件时的组件标签上绑定的非props的属性(class和style除外)向下传递。在子组件中应当添加inheritAttrs: false(避免父作用域的不被认作props的特性绑定应用在子组件的根元素上)。
3、v-on="$listeners"：通过this.emit(‘事件名’,数据)，将底层级的信息往高层级传递。
三、自定义指令 vue.directive
1、vue.directive的作用
vue.directive是我们除了内置的指令（如v-model和v-show）之外的自定义指令。自定义指令是对普通DOM元素进行的底层操作，它是一种有效的的补充和扩展，不仅可以用于定义任何的dom操作，并且是可以复用的，
2、vue.directive的使用场景
例如在图片加载完成前，用随机的背景色占位，图片加载完成后直接渲染出来，用自定义指令可以方便的实现该问题。还有高亮类的操作，可以将其封装为自定义指令。
3、使用vue.directive的3个demo
<template>
<div>
<div id="app"><input v-focus /></div>
<hr>
<p style="width:200px;height:200px" v-pin='colors'>trying</p>
<hr>
<div id="app" v-demo:foo.a.b="message"></div>
</div>
</template>
<script>
import Vue from "vue";
// 1、输入框聚焦
Vue.directive("focus", {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus();
},
});
// 2、绑定背景颜色
Vue.directive('pin', function(el, binding) { //背景颜色
el.style.background = binding.value
})
// 3、文字显示
Vue.directive('demo', {
bind: function (el, binding, vnode) {
var s = JSON.stringify
el.innerHTML =
'name: ' + s(binding.name) + '<br>' +
'value: ' + s(binding.value) + '<br>' +
'expression: ' + s(binding.expression) + '<br>' +
'argument: ' + s(binding.arg) + '<br>' +
'modifiers: ' + s(binding.modifiers) + '<br>' +
'vnode keys: ' + Object.keys(vnode).join(', ')
}
})
export default {
name: "directive",
data() {
return {
colors:"",//定义变量接收
message:'left',
}
},
created(){
this.colors="pink"
}
}
</script>
3.2、使用vue.directive的图片加载
<template>
<div>
<div v-img="url" style="width: 500px; height: 500px;"></div>
</div>
</template>
<script>
import Vue from "vue"; //需要引入
Vue.directive("img", {
bind:function(el){
var color = Math.floor(Math.random() * 1000000);
el.style.backgroundColor = "#" + color;
},
inserted: function (el, binding) {
var img = new Image();
img.src = binding.value;
img.onload = function () {
el.style.backgroundImage = "url(" + binding.value + ")";
};
},
});
export default {
name: "directive",
data() {
return {
url: "../../../1.jpg",//据具体图片存储文件夹而定
};
},
};
</script>
4、vue.directive的官方概念
1、vue.directive 有两个参数：id（string）和[definition](function|object)
2、vue.directive有5种钩子函数，分别是：bind, inserted ,update, componentUpdated, unbind
2.1、bind：只调用一次，指令第一次绑定到元素时调用，在这里可以进行一次性的初始化设置
2.2、inserted：被绑定元素插入父节点时调用（仅保证父节点存在，但不一定被插入文档中）
2.3、update:所在组件的vnode更新时调用，但是可能发生在其子vnode更新之前，指令的值可能发生了变化，也可能没有
2.4、componentUpdate：指令所在组件的vnode及其子vnode全部更新后调用
2.5、unbind：只调用一次，指令与元素解绑时调用
3、钩子函数参数
el，binding（name,value,oldValue,expression,arg,modifiers）， vnode，oldvnode
4、动态指令参数
指令的参数可以是动态的，例如，v-myDirective:[argument]="value"中，argument参数可以根据组件实例数据进行更新
5、对象字面量
指令需要多个值，可以传入一个js对象字面量，指令函数接受所有合法的js表达式
5、vue.directive使用体验
5.1、增长了不同的知识点，
5.2、update组件更新前的状态。componentUpdated组件更新后的状态
5.3、bind时父节点为null，bind是在dom书绘制前调用
5.4、inserted时父节点存在，在dom树绘制后调用