目前比较流行的公司网站建站技术,无广告免费追剧软件,如何做商城网站小程序,重庆 网站 建设 公司目录 01-ref属性在元素和组件上的分别使用02-利用nextTick监听DOM更新后的情况03-自定义指令与自定义全局属性及应用场景04-复用组件功能之Mixin混入05-插件的概念及插件的实现06-transition动画与过渡的实现07-动态组件与keep-alive组件缓存08-异步组件与Suspense一起使用09-跨… 目录 01-ref属性在元素和组件上的分别使用02-利用nextTick监听DOM更新后的情况03-自定义指令与自定义全局属性及应用场景04-复用组件功能之Mixin混入05-插件的概念及插件的实现06-transition动画与过渡的实现07-动态组件与keep-alive组件缓存08-异步组件与Suspense一起使用09-跨组件间通信方案 Provide_Inject10-Teleport实现传送门功能11-虚拟DOM与render函数及Diff算法虚拟DOM 01-ref属性在元素和组件上的分别使用
Vue是基于MVVM设计模式进行实现的视图与数据不直接进行通信但是Vue并没有完全遵循这一原则而是允许开发者直接进行原生DOM操作。
在Vue中可通过ref属性来完成这一行为通过给标签添加ref属性然后再通过vm.$refs来获取DOM把ref属性添加给组件可以获取到组件的实例对象间接地实现组件之间的通信
templatedivh2ref属性/h2button clickhandleClick点击/buttondiv refelemaaaaaaaaa/divdiv refelem2bbbbbbbbb/divmy-head refelem3/my-head/div
/templatescriptimport MyHead from /2_头部组件.vueexport default {methods: {handleClick(){// ref属性添加到元素身上可以获取到当前元素的原生DOMconsole.log( this.$refs.elem );console.log( this.$refs.elem2 );//ref属性添加到组件身上可以获取到当前组件的vm对象(实例对象)this.$refs.elem3.handleMessage(根组件的数据);}}}
/script 2_头部组件.vue文件
templatedivhello myhead/div
/templatescriptexport default {data(){return {message: 头部组件的消息}},methods: {handleMessage(data){console.log(data);}}}
/script02-利用nextTick监听DOM更新后的情况
主要作用将回调推迟到下一个 DOM 更新周期之后执行。在更改了一些数据以等待 DOM 更新后立即使用它默认情况下数据的更新会产生一个很小的异步延迟所以直接在数据改变后取获取DOM是得不到DOM更新后的结果而得到的是DOM更新前的结果。如何才能得到DOM更新后的结果呢可以有两种方案 第一种就是利用生命周期updated这个钩子函数第二种就是利用我们讲的nextTick方法支持两种风格即回调和promise。
03-自定义指令与自定义全局属性及应用场景
除了核心功能默认内置的指令 (例如v-model和 v-show)Vue 也允许注册自定义指令来实现一些封装功能。自定义指令的实现 实现一个简单的v-color指令用于给元素添加背景色 下面我们来完成一个实际可以应用的指令按钮权限指令一般情况下这种指令不会局部使用而是全局使用所以可以通过vue来实现一个全局的按钮权限指令 自定义全局属性 添加一个可以在应用的任何组件实例中访问的全局 property这样在引入一些第三方模块的时候就不用每一次进行import操作而是直接通过this对象去访问全局属性即可下面举一个例子实现一个http的全局属性。
04-复用组件功能之Mixin混入
它是选项式API的一种复用代码的形式通过混入mixin的方式我们可以将一些公共的数据、方法或计算属性复用到多个组件中提高代码的可维护性和重用性. mixin存在的问题就是不够灵活不支持传递参数这样无法做到差异化的处理所以目前比较推荐的复用操作还是选择使用组合式API中的use函数来完成复用的逻辑处理
05-插件的概念及插件的实现
插件是自包含的代码通常向 Vue 添加全局级功能。例如全局方法、全局组件、全局指令、全局mixin等等。基于Vue的第三方模块都是需要通过插件的方式在Vue中进行生效的比如Element Plus、Vue Router、Vuex等等。
06-transition动画与过渡的实现
Vue中通过两个内置的组件来实现动画与过渡效果分别是transition和transition-group
07-动态组件与keep-alive组件缓存
动态组件 动态组件可以实现在同一个容器内动态渲染不同的组件依一个内置组件component的is属性的值来决定使用哪个组件进行渲染。 keep-alive组件 当我们点击的时候就会进行组件的切换。在每次切换的过程中都会重新执行组件的渲染这样组件操作的行为就会还原而我们如何能够保证组件不变呢可以利用keep-alive对组件进行缓存这样不管如何切换都会保持为初始的组件渲染这样可以很好的保留之前组件的行为。 组件的切换也可以配合transition完成动画的切换。
08-异步组件与Suspense一起使用
异步组件 在大型应用中我们可能需要将应用分割成小一些的代码块并且只在需要的时候才从服务器加载一个模块。 对于大型项目来说如果能实现按需载入的话那么势必会对性能有所提升在Vue中主要就是利用defineAsyncComponent来实现异步组件的。 Suspense组件 由于异步组件是点击切换的时候才去加载的所以可能会造成等待的时间那么这个时候可以配合一个loading效果在Vue中提供了一个叫做Suspense的组件用来完成loading的处理。
09-跨组件间通信方案 Provide_Inject
正常情况下我们的组件通信是需要一级一级的进行传递通过父子通信的形式那么如果有多层嵌套的情况下从最外层把数据传递给最内层的组件就非常的不方便需要一级一级的传递下来那么如何才能方便的做到跨组件通信呢
可以采用Provide 和 inject 依赖注入的方式来完成需求
10-Teleport实现传送门功能
Teleport组件 Teleport可以实现传送门功能也就是说逻辑属于当前组件中而结构需要在组件外进行渲染例如按钮模态框组件。 逻辑组件 但是往往我们需要的并不是普通组件的调用方式而是逻辑组件的调用方式:
11-虚拟DOM与render函数及Diff算法虚拟DOM
虚拟DOM Vue框架帮我们完成了大量的DOM操作那么在底层Vue并没有直接操作真实的DOM因为真实的DOM直接去操作是非常好性能的所以最好在JS环境下进行操作然后在一次性进行真实DOM的操作。 内置的render函数可以把字符串转换成虚拟DOM。 Diff算法 当更新的时候一个依赖发生变化后副作用会重新运行这时候会创建一个更新后的虚拟 DOM 树。运行时渲染器遍历这棵新树将它与旧树进行比较然后将必要的更新应用到真实 DOM 上去。 而两个虚拟DOM进行对比的时候需要加入一些算法提高对比的速度这个就是Diff算法。 在脚手架下我们推荐使用:
