Vue · Magic_sword2

[TOC] # 简介说明 原文链接： - [Vue2](https://v2.cn.vuejs.org/) - [Vue.js 九个性能优化技巧](https://zhuanlan.zhihu.com/p/348087610) - [在 Vue2 的类组件上建立 Vue3 的 composition API 抽象](https://mp.weixin.qq.com/s/WsiG1aewgnuCyly3BYkC6Q) - [渲染函数 & JSX](https://v2.cn.vuejs.org/v2/guide/render-function.html) ``` 版本：vue 作用：组件化开发的渐进式框架 ``` # 安装模块 # Widows ***** npm install vue # Linux ***** npm install vue # 引入说明 ***** 引入说明 ### 示例内容 1. 浏览器 ``` <div id="app"> {{ message }} </div> <script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> ``` # Vue.[opt] # name ***** 只有作为组件选项时起作用 # mixins ***** 混入注册，合并mixins传入的vue属性，接收数组 # extends ***** 允许声明扩展另一个组件 (可以是一个简单的选项对象或构造函数)，而无需使用 Vue.extend # directives ***** 自定义指令 # provide ***** 可以跨组件传递的函数或者是对象 # inject ***** 接收跨组件传递的函数或者是对象 # propsData ***** 创建实例时传递 props。主要作用是方便测试。 ### 示例内容 1. 举例说明 ``` var Comp = Vue.extend({ props: ['msg'], template: '<div>{{ msg }}</div>' }) var vm = new Comp({ propsData: { msg: 'hello' } }) ``` # props ***** 定义从父元素获取的变量名，未使用props定义的属性，会直接放到根元素上面 ### 示例内容 1. 类型验证 ``` props: { a: Number, b: [String, Number], c: { type: String, required: true }, d: { type: Number, default: 100 }, e: { type: Object, default: function() { return {message: "hello"}; }, f: { validator: function(value) { return true; } } } } ``` 2. 结构类型 ``` props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, contactsPromise: Promise // 或任何其他构造函数 } ``` # inheritAttrs ***** 设置未接收的props属性不自动绑定到根元素上面，可以通过this.$attrs获取 # components ***** 使用的组件对象字典 # el ***** 组件的挂载点，不提供template将innerHtml作为template，且自动挂载 # template ***** 组件的视图模板 ### 示例内容 1. 浏览器中的模板 ``` <template id="temp"> <div>Hello template</div> </template> ``` # methods ***** 将方法定义到methods # computed ***** 定义派生计算数据，会缓存结果，可以感知依赖 ### 示例内容 1. 举例说明 ``` computed: { "msg1": function() { }, "msg2": { set() { }, get() { } } }, ``` # watch ***** 监听属性变化，执行函数，支持层级监听，深度监听需要设置deep ### 示例内容 1. 举例说明 ``` watch: { msg: { handler: "方法名", deep: "深度观察：对象任何层级数据发生变化，watch方法都会被触发", immediate: true// 立即调用，在侦听开始时立即调用一次watch方法 }, "msg.sender": ["m1", "m2"], // 数组方式，可调用多个方法 "msg.func": function() { //一个函数被触发的通用形式 } }, ``` 2. 官方案例 ``` var vm = new Vue({ data: { a: 1, b: 2, c: 3, d: 4, e: { f: { g: 5 } } }, watch: { a: function (val, oldVal) { console.log('new: %s, old: %s', val, oldVal) }, // 方法名 b: 'someMethod', // 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深 c: { handler: function (val, oldVal) { /* ... */ }, deep: true }, // 该回调将会在侦听开始之后被立即调用 d: { handler: 'someMethod', immediate: true }, e: [ 'handle1', function handle2 (val, oldVal) { /* ... */ }, { handler: function handle3 (val, oldVal) { /* ... */ }, /* ... */ } ], // watch vm.e.f's value: {g: 5} 'e.f': function (val, oldVal) { /* ... */ } } }) vm.a = 2 // => new: 2, old: 1 ``` # filters ***** 过滤方法，支持管道符使用，可以多层过滤 # model ***** 允许一个自定义组件在使用 v-model 时定制 prop 和 event ### 示例内容 1. 举例说明 ``` Vue.component('my-checkbox', { model: { prop: 'checked', event: 'change' }, props: { // this allows using the `value` prop for a different purpose value: String, // use `checked` as the prop which take the place of `value` checked: { type: Number, default: 0 } } }) ``` # delimiters ***** 改变纯文本插入分隔符，可以解决模板引擎冲突 # functional ***** 声明函数式组件，使组件无状态 (没有 data) 和无实例 (没有 this 上下文)，布尔值 ### 示例内容 1. 举例说明 ``` 组件中选项声明： - functional - abstract 都不会产生虚拟节点，同时父组件也无法获取到对应的default插槽 ``` # data ***** 数据创建函数 # render ***** 渲染组件的视图，与template类似，但是更底层 ### 示例内容 1. 举例说明 ``` render(createElement){ // createElement接收三个参数 // 1. HTML标签字符串(String) | 组件选项对象(Object) | 节点解析函数(Function) // 2. 定义节点特性的对象(Object) // 3. 子节点，createElement构建的VNode节点或字符串生成的无标签文本节点(Array | String) return createElement() } ``` # renderError ***** 当 render 函数遭遇错误时，提供另外一种渲染输出 # beforeCreate ***** 实例化初始之后，数据观测和事件绑定之前 # created ***** 实例化初始之后，挂载尚未开始 # beforeMount ***** 挂载之前，render函数首次被调用 # mounted ***** 实例挂载到DOM节点之后 # beforeUpdate ***** 数据更新时，在虚拟DOM状态变化之前 # updated ***** 虚拟DOM被重新渲染之后 # activated ***** 被 keep-alive 缓存的组件激活时调用 # deactivated ***** 该钩子在服务器端渲染期间不被调用 # beforeDestory ***** 实例销毁之前，此时实例依然可用 # destroyed ***** 实例销毁之后，此时VUE实例及其子实例将完全解绑 # errorCaptured ***** 当捕获一个来自子孙组件的错误时被调用 # Vue # [new]-Vue() ***** 实例化一个vue app对象，注意模板属性中要用-进行连词，接收时要使用驼峰命名 ### *指令 1. 列表 | 指令 | 作用 | | --- | --- | | v-if | 当值为true时页面显示，删除不显示标签 | | v-else-if | 配合v-if | | v-else | 配合v-if | | v-show | 当值为true时页面显示，隐藏不显示标签 | | v-for | 循环遍历可迭代对象，可循环number | | v-once | 只渲染一次，后期不再更新 | | v-slot | 嵌入模板插槽 | | v-on | 定义事件和哪一个方法进行绑定，$event代表事件对象 | | v-bind | 定义dom属性和哪一个data进行单向绑定 | | v-model | 进行双向绑定，同时只能有一个属性，由元素或组件自身决定，绑定一个属性和元素自身变化值对应 | | v-text | 设置innerText | | v-html | 设置 innerHtml，解析html内容，不转义 | | v-pre | 忽略这个元素和它子元素内容的编译 | | v-cloak | 解决渲染慢出现模板语法的问题，配合css [v-cloak]{display:none} | 2. 修饰符 | 修饰符 | 定义域 | 作用 | | --- | --- | --- | | sync | v-bind | 组件内部需要触发，用于同步变量更新，与v-model指令不同处在于可以定义多个 | | prop | v-bind | 作为一个 DOM property 绑定而不是作为 attribute 绑定 | | camel | v-bind | 将 kebab-case 特性名转换为 camelCase | | lazy | v-model | 代替input使用change事件 | | number | v-model | 将值转换为number类型 | | trim | v-model | 过滤首尾空格 | | stop | v-on | 阻止冒泡 | | prevent | v-on | 阻止默认行为 | | capture | v-on | 是否捕获阶段 | | self | v-on | 限制事件仅作用于自身 | | once | v-on | 事件只触发一次 | | passive | v-on | 移动端，限制事件用不调用preventDefault() | | 13 | v-on:keyup | 输入13号键位 | | enter | v-on:keyup | 输入enter | | delete | v-on:keyup | 输入delete | # *version ***** 提供字符串形式的 Vue 安装版本号 # *filters ***** 全局过滤方法，支持管道符使用，可以多层过滤 # *mixin ***** 全局加入混入内容 1. 举例说明 ``` // 定义一个混入对象 var myMixin = { created: function () { this.hello() }, methods: { hello: function () { console.log('hello from mixin!') } } } // 定义一个使用混入对象的组件 var Component = Vue.extend({ mixins: [myMixin] }) var component = new Component() // => "hello from mixin!" ``` # *set() ***** 设置引用类型进行注册 ### 示例内容 1. 举例说明 ``` Vue.set(app.user, "age", 10) ``` # *delete() ***** 删除对象的 property # *use() ***** 注册插件 ### 示例内容 1. 举例说明 ``` Vue.use(插件); Vue.use(function(){console.log("插件")}); Vue.use({ install:function(_vue,options){ // 注入逻辑 _vue.prototype.http=http; } }) ``` # *extend() ***** 创建Vue实例类构造器，多用于TS类型检查 # *component() ***** 注册或获取全局组件 ### 示例内容 1. 举例说明 ``` Vue.component('tab', { template: `<div>选项卡</div>` }); let app = new Vue({ template: `<div><h1>测试</h1><tab/></div>` }); app.$mount("#root") ``` # *nextTick() ***** 在下次 [ DOM 更新 ]循环结束之后执行延迟回调，在修改数据之后立即使用这个方法，获取更新后的 DOM。 # *directive() ***** 创建全局自定义指令 ### 参数说明 name: * 类型：字符串 * 默认值：无 * 描述：自定义指令名称 * 可选值：[ ] opt: * 类型：对象 * 默认值：无 * 描述：指令配置 * 可选值：[ ] - bind - inserted - update - componentUpdate - unbind ### 示例内容 1. 举例说明 ``` Vue.directive("test", { bind: function (el, binding) { console.log("bind"); }, inserted: function (el, binding) { console.log("inserted"); }, componentUpdated: function (el, binding) { console.log("componentUpdated"); }, update: function (el, binding) { console.log("update"); }, unbind: function (el, binding) { console.log("unbind"); } }); ``` 2. 指令格式 ``` v-指令名:参数(binding.arg).修饰符(binding.modifiers)="传入内容（binding.value）" ``` # *compile() ***** 将一个模板字符串编译成 render 函数 # *observable() ***** 让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。 ### 示例内容 1. 举例说明 ``` const state = Vue.observable({ count: 0 }) const Demo = { render(h) { return h('button', { on: { click: () => { state.count++ }} }, `count is: ${state.count}`) } } ``` # $el ***** 绑定的元素 # $vnode ***** 获取虚拟DOM对象 # $root ***** 访问根组件 # $parent ***** 访问父组件 # $children ***** 访问子元素组件 # $refs ***** 获取有ref属性的dom元素，获取组件节点 # $options ***** 用来获取data外面的数据和方法 # $attrs ***** 获取未接收的props # $props ***** 获取传入的数据 # $listeners ***** 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器 ### 示例内容 1. 传递父组件参数 ``` v-bind="$props" v-on="$listeners" ``` # $data ***** 渲染的数据 # $slots ***** 访问静态插槽的内容 # $scopedSlots ***** 访问作用域插槽 # \_\_patch\_\_ ***** 渲染虚拟DOM为真实DOM # $on() ***** 监听一个传入自定义事件 # $emit() ***** 触发一个传入自定义事件 ### 示例内容 1. 举例说明 ``` this.$emit("change","value") ``` # $watch() ***** 绑定数据观察回调 # $mount() ***** 把渲染后的视图挂载到指定位置 # $set() ***** 设置引用类型进行注册 ### 示例内容 1. 举例说明 ``` Vue.set(app.user, 'gender', '男'); // 实例.$set 是 Vue.set 的别名 app.$set(app.user, 'gender', '男') ``` # $nextTick() ***** 在下次 [ DOM 更新 ]循环结束之后执行延迟回调，在修改数据之后立即使用这个方法，获取更新后的 DOM。 # $createElement() ***** 创建虚拟dom节点 # Vue.config # *silent ***** 开启或取消 Vue 所有的日志与警告 # *optionMergeStrategies ***** 自定义合并策略的选项 # *devtools ***** 配置是否允许 vue-devtools 检查代码 # *errorHandler ***** 指定组件的渲染和观察期间未捕获错误的处理函数 # *warnHandler ***** 为 Vue 的运行时警告赋予一个自定义处理函数 # *ignoredElements ***** 须使 Vue 忽略在 Vue 之外的自定义元素 # *keyCodes ***** 给 v-on 自定义键位别名 # *performance ***** 设置为 true 以在浏览器开发工具的性能/时间线面板中启用对组件初始化、编译、渲染和打补丁的性能追踪 # *productionTip ***** 设置为 false 以阻止 vue 在启动时生成生产提示 # Vue.transition-group # [com]-transition-group ***** 动画组件，渲染v-for产生的列表过渡 ### 示例内容 1. 举例说明 ``` <template> <div id="app"> <transition-group tag="ul"> <li :key="item" v-for="item of data"> {{item}} </li> </transition-group> <label> 输入内容： <input type="text" v-model="val"> </label> <button @click="addItem">增加内容</button> </div> </template> <script> export default { name: 'app', data() { return { data: [...Array(10).keys()], val: "testData" } }, methods: { addItem() { console.log(this.val); this.data.push(this.val); } } } </script> <style> .v-enter-active, .v-leave-active { transition: opacity 2s; } .v-enter, .v-leave-to { opacity: 0; } .v-enter-to, .v-leave { opacity: 1; } </style> ``` # Vue.transition # [com]-transition ***** 动画组件 ### 示例内容 1. 举例说明 ``` .v-enter-active, .v-leave-active { transition: opacity 2s; } .v-enter, .v-leave-to { opacity: 0; } .v-enter-to, .v-leave { opacity: 1; } ``` 2. 结合animate.css ``` <template> <div id="app"> <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut" > <div v-if="display>0"> <img alt="Vue logo" src="./assets/logo.png"> </div> </transition> <button @click="toggle">切换</button> </div> </template> ``` 3. 特别注意 ``` vue会进行组件复用，也就是说组件切换的话会造成动画不会被执行，这时候你需要改变key值让vue不再复用组件但是由于key值改变，vue会新建一个元素组件，这时候可能会出现新元素和旧元素在过渡时同时出现，解决办法设置transiton的mode属性 ``` # name ***** 被添加的css动画前缀 # mode ***** 新老元素过渡模式，in-out(新元素先出现，之后旧元素隐藏) | out-in(旧元素隐藏后出现新元素) # css ***** 定义css过渡动画还是JS过渡动画 # duration ***** 动画执行延时 # enter-active-class ***** 定义进入被激活时添加的类 # leave-active-class ***** 定义离开被激活时添加的类 # enter-class ***** 自定义进入的类名 # enter-to-class ***** 自定义进入的类名 # leave-class ***** 自定义离开的类名 # leave-to-class ***** 自定义离开的类名 # [eve]-before-enter ***** 过渡的事件监听 # Vue.component # [com]-component ***** 动态更新组件 # is ***** 当前显示的组件的名称，该属性可以传递给其它任何组件会是同样效果 # inline-template ***** 当前显示的组件的名称 # Vue.keep-alive # [com]-keep-alive ***** 缓存子组件而不销毁子组件，子组件会增加actived和deactived生命周期 # include ***** 只有匹配时才会被缓存 # exlude ***** 只有匹配时不被缓存 # Vue.slot # [com]-slot ***** 父组件模板里，插入在子组件标签内的所有内容将替代子组件的\<slot\>标签及它的内容，缩写# ### 示例内容 1. 子组件定义插槽 ``` <slot name="插槽名称" :数据变量名="数据"></slot> ``` 2. 具名插槽 ``` <template v-slot:插槽名称="接收传递过来的数据变量"> 插槽内容 </template> ``` 3. 非template元素嵌入插槽 ``` <div slot="div2"> 插槽内容 </div> ``` 3. 【废弃】作用域插槽 ``` 通过slot-scope将插槽中的数据进行返回 <div id="root"> <child> <template slot-scope="props"> 获取传入数据 <li>{{props.value}}</li><--!定义使用渲染方式--> </template> </child> <child> <template slot-scope="props"> <h1>{{props.value}}</h1> </template> </child> </div> <script> Vue.component('child',{ data: function(){ return { list:[1,2,3,4] } }, template: `<div> <ul> <slot v-for="value in list" :value=value>//使用slot占位 </slot> </ul> </div>` }) var vm=new Vue({ el: '#root' }) </script> ```