![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 52
·Q·
努力努力
展开
-
浅谈数据响应式原理
响应式数据的最终目标:是当对象本身或对象属性发生变化时,将会运行一些函数,最常见的就是render函数**在具体实现上,vue用到了几个核心部件:Observer Dep Watcher SchedulerObserverObserver要实现的目标非常简单,就是把一个普通的对象转换为响应式的对象为了实现这一点,Observer把对象的每个属性通过Object.defineProperty转换为带有getter和setter的属性,这样一来,当访问或设置属性时,vue就有机会做一些原创 2021-04-13 14:54:19 · 730 阅读 · 0 评论 -
vue.config.js常用配置
1.devserve 配置开发服务器2.Publicpath 配置基地址 BASE_URL等于publicpath的值 Type:string Default:'/' 部署应用包时的基本 URL。用法和 webpack 本身的output.publicPath一致 3.runtimeCompiler 是否开启运行时编译 开启会在运行是进行编译 并给打包结果中加入编译器 Type:boolean Default:false 是否...原创 2021-04-20 21:16:21 · 320 阅读 · 0 评论 -
Vue优化
使用key对于通过循环生成的列表,应给每个列表项一个稳定且唯一的key,这有利于在列表变动时,尽量少的删除、新增、改动元素使用冻结的对象冻结的对象不会被响应化使用函数式组件参见函数式组件使用计算属性如果模板中某个数据会使用多次,并且该数据是通过计算得到的,使用计算属性以缓存它们非实时绑定的表单项当使用v-model绑定一个表单项时,当用户改变表单项的状态时,也会随之改变数据,从而导致vue发生重渲染(rerender),这会带来一些性能的开销。特别是当用户改变表单项时,页面有一些动画正在原创 2021-04-16 00:40:20 · 85 阅读 · 0 评论 -
vue过渡与动画
内置组件Transition官网详细文档:https://cn.vuejs.org/v2/guide/transitions.html时机Transition组件会监控slot中唯一根元素的出现和消失,并会在其出现和消失时应用过渡效果具体的监听内容是:它会对新旧两个虚拟节点进行对比,如果旧节点被销毁,则应用消失效果,如果新节点是新增的,则应用进入效果如果不是上述情况,则它会对比新旧节点,观察其v-show是否变化,true->false应用消失效果,false->true应用进原创 2021-04-16 00:39:38 · 73 阅读 · 0 评论 -
Vue生命周期
创建vue实例和创建组件的流程基本一致首先做一些初始化的操作,主要是设置一些私有属性到实例中运行生命周期钩子函数beforeCreate进入注入流程:处理属性、computed、methods、data、provide、inject,最后使用代理模式将它们挂载到实例中运行生命周期钩子函数created生成render函数:如果有配置,直接使用配置的render,如果没有,使用运行时编译器,把模板编译为render运行生命周期钩子函数beforeMount创建一...原创 2021-04-16 00:37:26 · 168 阅读 · 0 评论 -
v-model原理
v-model即可以作用于表单元素,又可作用于自定义组件,无论是哪一种情况,它都是一个语法糖,最终会生成一个属性和一个事件当其作用于表单元素时,vue会根据作用的表单元素类型而生成合适的属性和事件。例如,作用于普通文本框的时候,它会生成value属性和input事件,而当其作用于单选框或多选框时,它会生成checked属性和change事件。v-model也可作用于自定义组件,当其作用于自定义组件时,默认情况下,它会生成一个value属性和input事件。<Comp v-model="data"原创 2021-04-16 00:36:08 · 139 阅读 · 0 评论 -
vue组件之间有哪些通信方式?
父子组件通信绝大部分vue本身提供的通信方式,都是父子组件通信prop最常见的组件通信方式之一,由父组件传递到子组件event最常见的组件通信方式之一,当子组件发生了某些事,可以通过event通知父组件style和class父组件可以向子组件传递style和class,它们会合并到子组件的根元素中示例父组件<template> <div id="app"> <HelloWorld style="color:red" c原创 2021-04-16 00:33:34 · 190 阅读 · 0 评论 -
插槽原理
父组件再用子组件的插槽式 想到于创建一个函数 函数里面的返回值是一个vnode 在子组件插槽内然后调用这个函数 将得到vode放到相应位置作用域插槽可以进行传参(参数可以解构) 普通插槽相当于不能传参而已左边就相当于创建一个右边那样的函数 然后子组件插槽 调用这个函数...原创 2021-04-15 13:26:13 · 321 阅读 · 0 评论 -
computed和methods有什么区别
面试题:computed和methods有什么区别标准而浅显的回答在使用时,computed当做属性使用,而methods则当做方法调用computed可以具有getter和setter,因此可以赋值,而methods不行computed无法接收多个参数,而methods可以computed具有缓存,而methods没有更接近底层原理的回答vue对methods的处理比较简单,只需要遍历methods配置中的每个属性,将其对应的函数使用bind绑定当前组件实例后复制其引用到组件实.原创 2021-04-15 00:24:21 · 564 阅读 · 0 评论 -
Vue-Router
路由插件npm i vue-router路由插件的使用import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter); // Vue.use(插件) 在Vue中安装插件const router = new VueRouter({ // 路由配置})new Vue({ ..., router})1.基本使用// 路由配置const router = new VueRouter({原创 2021-04-05 00:44:34 · 1332 阅读 · 2 评论 -
v-if 和 v-show
v-if 和 v-showv-if 和 v-show 有什么区别?v-if能够控制是否生成vnode,也就间接控制了是否生成对应的dom。当v-if为true时,会生成对应的vnode,并生成对应的dom元素;当其为false时,不会生成对应的vnode,自然不会生成任何的dom元素。v-show始终会生成vnode,也就间接导致了始终生成dom。它只是控制dom的display属性,当v-show为true时,不做任何处理;当其为false时,生成的dom的display属性为none。使原创 2021-04-04 11:52:18 · 204 阅读 · 0 评论 -
Vue组件生命周期
组件生命周期 1.常见应用加载远程数据一般在注入之后 越早越好export default { data(){ return { news: [] } }, async created(){ this.news = await getNews(); }}直接操作DOM一般挂载完之后export default { data(){ return { containerWidth:0, containerH原创 2021-04-04 11:48:57 · 78 阅读 · 0 评论 -
Vue核心概念
1.注入vue会将以下配置注入到vue实例:data:和界面相关的数据computed:通过已有数据计算得来的数据,将来详细讲解methods:方法模板中可以使用vue实例中的成员2.虚拟DOM树直接操作真实的DOM会引发严重的效率问题,vue使用虚拟DOM(vnode)的方式来描述要渲染的内容vnode是一个普通的JS对象,用于描述界面上应该有什么,比如:var vnode = { tag: "h1", children: [ { tag: undefined,原创 2021-04-04 11:44:22 · 149 阅读 · 0 评论 -
计算属性
计算属性和方法有什么区别?计算属性本质上是包含getter和setter的方法当获取计算属性时,实际上是在调用计算属性的getter方法。vue会收集计算属性的依赖,并缓存计算属性的返回结果。只有当依赖变化后才会重新进行计算。方法没有缓存,每次调用方法都会导致重新执行。计算属性的getter和setter参数固定,getter没有参数,setter只有一个参数。而方法的参数不限。由于有以上的这些区别,因此计算属性通常是根据已有数据得到其他数据,并在得到数据的过程中不建议使用异步、当前时间、随机数原创 2021-04-03 22:16:51 · 127 阅读 · 0 评论 -
Vue模板预编译
当vue-cli进行打包时,会直接把组件中的模板转换为render函数,这叫做模板预编译这样做的好处在于:运行时就不再需要编译模板了,提高了运行效率打包结果中不再需要vue的编译代码**,减少了打包体积**...原创 2021-04-03 22:13:54 · 1090 阅读 · 2 评论