vue学习巩固心得

1. 样式类
   对象绑定：
   
   
   数组绑定：
   
   组件绑定：（如果您的组件有多个根元素，您需要定义哪个组件将接收此类。您可以使用$attrs组件属性执行此操作,v-bind="$attrs" 也会继承父组件的事件）

（禁用属性继承：如果你不希望组件的根元素继承 attribute，可以在组件的选项中设置 inheritAttrs: false）

2.修饰符

• 鼠标按钮修饰符 .left .right .middle
• …
  3.组件
  
  4.props 和 emits
  都可以设置校验，但不通过校验，只会在控制台告警，不会影响传参，和事件触发。
  
  5.组件可以用v-model:arg 绑定多个值，子组件可以使用update:arg更新值
  
  6.自定义修饰符
  
  7.插槽（缩写方法： v-slot:header 可以被重写为 #header）
  #具名插槽，默认插槽（name: default）
  

v-slot 只能添加在 上 ,除非当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。

#作用域插槽

8.异步组件

#Suspense 异步组件

9.transition (https://v3.cn.vuejs.org/guide/transitions-enterleave.html#%E8%BF%87%E6%B8%A1%E6%A8%A1%E5%BC%8F)






当只用 JavaScript 过渡的时候，在 enter 和 leave 钩子中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。添加 :css=“false” 也会让 Vue 会跳过 CSS 的检测，除了性能略高之外，这也可以避免过渡过程中受到 CSS 规则的意外影响。

setup

在 setup 中你应该避免使用 this，因为它不会找到组件实例。setup 的调用发生在 data property、computed property 或 methods 被解析之前，所以它们无法在 setup 中被获取。

setup 选项是一个接收 props 和 context 的函数

- 传值几种方式总结：

	1. props
	2.$emit
	3.expose / ref ： 子组件expose 暴露，父组件ref.value.暴露出去的值
	4.$attrs
	5.v-model：
	6.provide / inject： 传输的数据尽可能保证在provide 端进行操作，避免在inject操作，否则数据异常，定位混乱。（如果要确保通过 			      provide 传递的数据不会被 inject 的组件更改，我们建议对提供者的 property 使用 readonly，例如： provide('location', readonly(location))，
	也可在provide 端，定义操作的方法，一并提供给inject端
	）
	7.Vuex

- watch 和 watchEffect区别

watch需要手动传入依赖，需要初始化执行，要配置 {immediate: true} ， watchEffect每次初始化时会执行一次回调函数来自动获取依赖，如果需要它DOM 更新后运行，可以配置{flush: ‘post’},(flush默认是pre,也可以接收sync,这将强制效果始终同步触发);从 Vue 3.2.0 开始，watchPostEffect 和 watchSyncEffect 别名也可以用来让代码意图更加明显。

watch 可以获取到原值，watchEffect，不行。

- 自定义合并策略

minxin自定义合并策略：
app.config.optionMergeStrategies.custom = (toVal, fromVal) => {
return fromVal || toVal
}

toVal：子实例 ， fromVal：父实例

- teleport

<teleport to="#modals"> <div>A</div> </teleport> <div>A</div>
将会被插入到id=modals 的标签内末尾

- 渲染函数

default: (props) => Vue.h(‘span’, props.text) 插槽也可以简写成这样

- html传参

- 移动端

补充：

vue父子组件实现双向绑定

// 父组件中引用子组件， :form.sync --- 实现数据的双向绑定 --- vue2
<Form :form.sync="form" :list="formList">
// 上方的.sync写法是下方写法的简写方式
<Form v-bind:form="form" v-on:update:form="form=$event" :list="formList"/>
--------------------------------------------------------------------
// 父组件
<Form  v-model:form="form" :list="formList">
// 子组件
$emit('update:form',新的值)

通过model属性来更改传入的键名

<Form  v-model="form" :list="formList">
//子组件的写法
export default {
    model: {
		prop: "form", // 需要对哪个接收的键名进行修改
		event: "formChange", // 修改后的触发父组件更新的方法名
		//不修改的状态下
		//1.如果是v-model传参，则默认触发父组件的方法名为update:value
		//2.如果是v-model:xx传参，则默认触发父组件的方法名为update:xx
	},
    props: {
        form: { // v-mode传入的值
            type: Object,
            default: () => {}
        }
    },
    methods: {
        handelChange() {
            this.$emit("formChange", {...}); // 修改 form 值
        }
    }
}

各透传示例：