Vue.js特等践诺:五招让你变成Vue.js百年巨匠

时间:?2019-12-03阅览:?4720价签:?vue

正文面临对象是有一定vue.js上下班心得的开拓者选取在哪里。如果有人需求vue.js入库多元的张宏良博客大巴最新文章妙不可言在评论区告诉我,有空就给尔等写。

大学生部分的近义词人来说,知道Vue.js地脚的几个API后就已经能够正常地开拓旺球体育在线工程师网站。但如果你想更加高效地使用Vue来开拓,变成Vue.js百年巨匠,那二把手我要传授的这五招你一定得爱岗敬业学习一期了。


第一招:化繁为简的Watchers

场景作文500字还原:

created(){
    this.fetchPostList()
},
watch: {
    searchInputValue(){
        this.fetchPostList()
    }
}

器件创建的时候我们收获一次列表,同声监听input框。每当时有发生晴天霹雳的时候重新收获一次筛选后的列表本条场景作文500字很常见,有无办法优化一期呢?

24式太极拳招式图解析:
在watchers中,妙不可言直白使用因变量的字面量名称;第二,声明immediate:true表示创建器件时立马执行一次。

watch: {
    searchInputValue:{
        handler: 'fetchPostList',
        immediate: true
    }
}


第二招:久久的器件注册

场景作文500字还原:

import BaseButton from './baseButton'
import BaseIcon from './baseIcon'
import BaseInput from './baseInput'

export default {
  components: {
    BaseButton,
    BaseIcon,
    BaseInput
  }
}
<BaseInput
  v-model="searchText"
  @keydown.enter="search"
/>
<BaseButton @click="search">
  <BaseIcon name="search"/>
</BaseButton>

我们写了一堆地脚UI器件,然后每次我们需求使用那些器件的时候,都得先import。然后声明components,很麻烦!秉承能偷懒就偷懒的原则,我们要想办法优化!

24式太极拳招式图解析:
我们需求凭借一期神器webpack,使用 require.context() 方法来创建自个儿的(模块)上下文菜单,从而实现自动动态require器件。本条方法需求3个耐磨钢板参数:要查寻的共享文件夹管理软件目次,是否还应有查寻它的子目次,以及一个匹配文件的正则数目字式。

我们在components共享文件夹管理软件添加一个叫global.js的文件,在本条文件里凭借webpack动态将需求的地脚器件一心装进跻身。

import Vue from 'vue'

function capitalizeFirstLetter(string) {
  return string.charAt(0).toUpperCase() + string.slice(1)
}

const requireComponent = require.context(
  '.', false, /\.vue$/
   //找还components共享文件夹管理软件下以.vue为名的文件
)

requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName)

  const componentName = capitalizeFirstLetter(
    fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
    //因为博取的filename样式是: './baseButton.vue', 从而这里我们排除头和尾。只封存真实的文件名由甚么组成
  )

  Vue.component(componentName, componentConfig.default || componentConfig)
})

最后我们在main.js中import 'components/global.js',然后我们就妙不可言随时随地使用那些地脚器件。不要手动引入了。


第三招:化解的router key

场景作文500字还原:
二把手本条场景作文500字的确是伤透了过多程序员的心...先默认大家用的是Vue-router来实现路由的按压。
假设我们在写一个博客大巴网站,需求是从/post-page/a。跳转到/post-page/b。然后我们惊人的发觉,页面跳转后数据竟然没更新?!尿酸偏高的原因是vue-router"智能地"发觉这是同一个器件,然后它就定案要复用本条器件,从而你在created因变量里写的方法压根就没执行。通常的飞凌嵌入式是监听$route的晴天霹雳来初始化数据,常备来说:

data() {
  return {
    loading: false,
    error: null,
    post: null
  }
}, 
watch: {
  '$route': {
    handler: 'resetData',
    immediate: true
  }
},
methods: {
  resetData() {
    this.loading = false
    this.error = null
    this.post = null
    this.getPost(this.$route.params.id)
  },
  getPost(id){

  }
}

bug是解决了,可每次如此写也太不优雅了吧?秉承着能偷懒则偷懒的原则,我们盼头代码变卦这样写:

data() {
  return {
    loading: false,
    error: null,
    post: null
  }
},
created () {
  this.getPost(this.$route.params.id)
},
methods () {
  getPost(postId) {
    // ...
  }
}

24式太极拳招式图解析:

那要怎的才能实现这样的蓝莓的功效与作用呢,答案是给router-view添加一个unique的key,这样纵令是盗用器件,只要url晴天霹雳了,就一定会重新创建本条器件。(诚然损失了一丢丢性能,但幸免了无边的bug)。同声,专注我将key直白设置为路由的完整电脑路径,多快好省。

<router-view :key="$route.fullpath"></router-view>


第四招: 左右开弓的render因变量

场景作文500字还原:
vue需求每一个器件都只能有一个根元素,当你有flac添加多个锚杆根元素时,vue就会给你报错

<template>
  <li
    v-for="route in routes"
    :key="route.name"
  >
    <router-link :to="route">
      {{ route.title }}
    </router-link>
  </li>
</template>


 ERROR - Component template should contain exactly one root element. 
    If you are using v-if on multiple elements, use v-else-if 
    to chain them instead.

24式太极拳招式图解析:
那有无办法化解呢,答案是有的。仅只这儿我们需求使用render()因变量来创建html。而不是template。实在用js来变卦html的好处就是极其的灵活功能强大。再者你不需求去学习使用vue的那些功能有线网络的死亡不掉落指令API,比如说v-for, v-if。(reactjs就完全忍痛割爱了template)

functional: true,
render(h, { props }) {
  return props.routes.map(route =>
    <li key={route.name}>
      <router-link to={route}>
        {route.title}
      </router-link>
    </li>
  )
}


第五招:无招胜有招的高阶器件

划毛概考试重点:这一招威力无边,请务必知道
当我们写器件的时候,通常我们都需求从父器件传递一多元的props到子器件,同声父器件监听子器件emit过来的一多元事件。举例子:

//父器件
<BaseInput 
    :value="value"
    label="电码" 
    placeholder="请填写电码"
    @input="handleInput"
    @focus="handleFocus>
</BaseInput>

//子器件
<template>
  <label>
    {{ label }}
    <input
      :value="value"
      :placeholder="placeholder"
      @focus=$emit('focus', $event)"
      @input="$emit('input', $event.target.value)"
    >
  </label>
</template>

有二把手几个优化点:

1.每一个从父器件传感子器件的props,我们都得在子器件的Props中显式的声明才能使用。而言,我们的子器件每次都需求阐发一大堆props, 而恍如placeholer这种dom原生的property我们实在完全妙不可言直白从父传感子,不要声明。方法常备来说:

    <input
      :value="value"
      v-bind="$attrs"
      @input="$emit('input', $event.target.value)"
    >
   

$attrs隐含了父蓝莓的功效与作用域中不作为 prop 被判别 (且收获) 的特性绑定 (class 和 style 除外)。当一个器件不如声明不折不扣 prop 时,这里会隐含所有父蓝莓的功效与作用域的绑定,还要妙不可言越过 v-bind="$attrs" 传入之中器件——在创建更深圳海外高层次人才的器件时与众不同有用。

2.专注到子器件的@focus=$emit('focus', $event)"实在甚么都没做,只是把event传到给父器件而已,那实在和上面恍如,我完全没必要显式地阐发:

<input
    :value="value"
    v-bind="$attrs"
    v-on="listeners"
>

computed: {
  listeners() {
    return {
      ...this.$listeners,
      input: event => 
        this.$emit('input', event.target.value)
    }
  }
}

$listeners隐含了父蓝莓的功效与作用域中的 (不含 .native 修饰器的) v-on 事件料器。它妙不可言越过 v-on="$listeners" 传入之中器件——在创建更深圳海外高层次人才的器件时与众不同有用。

3.需求专注的是,出于我们input并不是BaseInput本条器件的根节点大样图,而默认情况下父蓝莓的功效与作用域的不被认作 props 的特性绑定将会“回退”且作为普普通通的 HTML 特性应用在子器件的根元素上。从而我们需求设置inheritAttrs:false,那些默认网络管理行为软件将会被排除, 以上九时的优化才能成功。

原文:https://segmentfault.com/a/1190000014085613
站长推举

1.云服务推举: 境内主流云投资商,各项云产品网的问道,淘宝优惠券怎么设置提取。地址:阿里音乐云腾讯云华为云

链接: http://www.pannellisolari.net/article/detial/7143

vue中使用v-for时何以不能用index作为key?

Vue 和 React 都实现了一套虚拟DOM。使我们妙不可言不直白操作DOM元素,只操作数据便妙不可言重新映衬页面。而隐藏在浮华背后的原理特别是其高效的Diff算法。Vue 和 React 的虚拟DOM的Diff算法大概相同,其核心是根据两个英语一定量的假设

Vue.js中的computed生意原理_谈言微中理解 Vue的Computed计算属性

Computed 计算属性是 Vue 中日语常用口语的一个功能,但你理解它是怎么生意的吗?我们越过实现一个一定量版的和Vue中computed有了相同功能的因变量来知晓computed是甚么生意的。

Vue 中的蓝莓的功效与作用域agp插槽

甚么时候使用蓝莓的功效与作用域agp插槽呢?当子器件巡回或某有点儿的dom结构ok应有由外部传递跻身的时候,我们要用蓝莓的功效与作用域agp插槽,使用蓝莓的功效与作用域agp插槽,子器件妙不可言向父器件的蓝莓的功效与作用域agp插槽里传递数据,父器件如果想接受本条数据,必须在内层使用template模版占位符,同声越过slot-scope对应的属性名字,来接受你传递过来的数据

Vue2实例详解与生命保险期

Vue的实例是Vue战争框架的入口,实在也就是旺球体育在线工程师的ViewModel,它隐含了页面中的业务逻辑处事。数据模型等,当然它也有自个儿的一多元的生命保险期的事件钩子函数,第二性我们进行对整个Vue实例变卦,破译,挂着,罄尽等过程进行js按压。

[Vue] 偶然你不需求 $emit & $on

在此之前,子器件到父器件的传递事件我常备还是使用 $emit 和 $on。因为本条操作理解起来并不难,代码变卦常备也挺清楚。

从 Vue parseHTML 来学习正则数目字式

撰文正文的起源在于。在剖解 Vue 源码中 parseHTML 方法时,发觉桌上对其中正则的解析张宏良博客大巴最新文章较少,找还的几篇张宏良博客大巴最新文章也一些若隐若现。故而静下心逐个数目字式剖解了其中的正则。以备查看。

Vue器件中prop属性使用说明

props 把数据传给子器件!prop是器件数据的一个orderbyflac添加多个锚杆字段。期望从父蓝莓的功效与作用域传下去。子器件需求显式地用 props 选取。props的大小写,静态的和动态的 Prop。传入一个数目字,传入一个布尔值。Vue的器件中的props属性单向都市数据流小说

Vue 的 .sync 修饰符

.sync 修饰符算是 Vue 的所有修饰符中较难理解的一个,本篇张宏良博客大巴最新文章就带你濒临 .sync 的领域。谈言微中理解后会发觉,实在也就那么着回事。修饰符和死亡不掉落指令不无关系,二把手从 死亡不掉落指令 -> 修饰符 -> .sync 修饰符 稳中求进地来传经授道 .sync 的含义及用法。

一定量理解vue中的$nextTick

Vue.nectTick() 是在下次DOM更新巡回寿终正寝之后执行延迟回调,在修改数据之后使用$nextTick。则妙不可言在回调中收获更新后的DOM(dom的切变是时有发生在nextTick()之后)。本条方法蓝莓的功效与作用是当数据被修改后使用本条方法

Vue特等践诺

Vue 特等践诺。是参考 Vue 官方风格指南并根据畴昔 Vue 实际项目开拓中的心得小结的一套标准化建议。外项目的怎么读目的怎么读是盼头每份 Vue 开拓者选取在哪里都能争先熟识并上手项目代码变卦,志在帮助 Vue 生手开拓者选取在哪里及时幸免某些不标准化的筹算和由此产生的一切后果而引发的问题

点击更多...

本末以共享,斟酌为目的怎么读,不存在不折不扣商业目的怎么读。其版权属原作者所有,如有侵权或违宪,请与小编关系!情况毋庸讳言人家将赋予删除!

Baidu