最新公告
  • 欢迎您光临AA分享网,这里是高级程序员技术学习、分享的分享平台立即加入我们
  • 9种必备的Vue技术,不信你全知道!

    现在,Vue.js已成为前端开发的热门框架。有很多工程师利用Vue.js的便利性和强大功能。但是,我们完成的某些解决方案可能未遵循最佳做法。好吧,让我们看一下那些必备的Vue技术。【相关推荐:Vue.js视频教程】

    1. 函数组件

    函数组件 是无状态的,没有生命周期或方法,因此无法实例化

    创建一个函数组件非常容易,你需要做的就是在SFC中添加一个 functional: true 属性,或者在模板中添加 functional。由于它像函数一样轻巧,没有实例引用,所以渲染性能提高了不少。

    函数组件依赖于上下文,并随着其中给定的数据而突变。

    <template functional>
      <div class="book">
        {{props.book.name}} {{props.book.price}}
      </div>
    </template>
    
    <script>
    Vue.component('book', {
      functional: true,
      props: {
        book: {
          type: () => ({}),
          required: true
        }
      },
      render: function (createElement, context) {
        return createElement(
          'div',
          {
            attrs: {
              class: 'book'
            }
          },
          [context.props.book]
        )
      }
    })
    </script>

    2.深层选择器

    有时,你需要修改第三方组件的CSS,这些都是 scoped 样式,移除 scope 或打开一个新的样式是不可能的。

    现在,深层选择器 >>> /deep/ ::v-deep 可以帮助你。

    <style scoped>
    >>> .scoped-third-party-class {
      color: gray;
    }
    </style>
    
    <style scoped>
    /deep/ .scoped-third-party-class {
      color: gray;
    }
    </style>
    
    <style scoped>
    ::v-deep .scoped-third-party-class {
      color: gray;
    }
    </style>

    3.高级“watcher”

    立即执行

    当被监控的prop发生突变时,watch handler就会触发。但有时,它是在组件被创建后才出现的。

    是的,有一个简单的解决方案:在 created 的钩子中调用处理程序,但这看起来并不优雅,同时也增加了复杂性。

    或者,你可以向观察者添加 immediate 属性:

    watch: {
      value: {
        handler: 'printValue',
          immediate: true
      }
    },
    methods : {
      printValue () {
        console.log(this.value)
      }
    }

    深度监听

    有时,watch 属性是一个对象,但是其属性突变无法触发 wacher 处理程序。在这种情况下,为观察者添加 deep:true 可以使其属性的突变可检测到。

    请注意,当对象具有多个层时,深层可能会导致一些严重的性能问题。最好考虑使用更扁平的数据结构。

    data () {
      return {
        value: {
          one: {
            two: {
              three: 3
            }
          }
        }
      }
    },
    watch: {
      value: {
        handler: 'printValue',
        deep: true
      }
    },
    methods : {
      printValue () {
        console.log(this.value)
      }
    }

    多个handlers

    实际上,watch 可以设置为数组,支持的类型为 String、Function、Object。触发后,注册的watch处理程序将被一一调用。

    watch: {
      value: [
        'printValue',
        function (val, oldVal) {
          console.log(val)
        },
        {
          handler: 'printValue',
          deep: true
        }
      ]
    },
    methods : {
      printValue () {
        console.log(this.value)
      }
    }

    订阅多个变量突变

    watcher 不能监听多个变量,但我们可以将目标组合在一起作为一个新的 computed,并监视这个新的 "变量"。

    computed: {
      multipleValues () {
        return {
          value1: this.value1,
          value2: this.value2,
        }
      }
    },
    watch: {
      multipleValues (val, oldVal) {
        console.log(val)
      }
    }

    4.事件参数:$event

    $event 是事件对象的一个特殊变量。它在某些场景下为复杂的功能提供了更多的可选参数。

    原生事件

    在原生事件中,该值与默认事件(DOM事件或窗口事件)相同。

    <template>
      <input type="text" @input="handleInput('hello', $event)" />
    </template>
    
    <script>
    export default {
      methods: {
        handleInput (val, e) {
          console.log(e.target.value) // hello
        }
      }
    }
    </script>

    自定义事件

    在自定义事件中,该值是从其子组件中捕获的值。

    <!-- Child -->
    <template>
      <input type="text" @input="$emit('custom-event', 'hello')" />
    </template>
    
    <!-- Parent -->
    <template>
      <Child @custom-event="handleCustomevent" />
    </template>
    
    <script>
    export default {
      methods: {
        handleCustomevent (value) {
          console.log(value) // hello
        }
      }
    }
    </script>

    5.路由器参数解耦

    我相信这是大多数人处理组件中路由器参数的方式:

    export default {
      methods: {
        getRouteParamsId() {
          return this.$route.params.id
        }
      }
    }

    在组件内部使用 $route 会对某个URL产生强耦合,这限制了组件的灵活性。

    正确的解决方案是向路由器添加props。

    const router = new VueRouter({
      routes: [{
        path: '/:id',
        component: Component,
        props: true
      }]
    })

    这样,组件可以直接从props获取 params

    export default {
      props: ['id'],
      methods: {
        getParamsId() {
          return this.id
        }
      }
    }

    此外,你还可以传入函数以返回自定义 props

    const router = new VueRouter({
      routes: [{
        path: '/:id',
        component: Component,
        props: router => ({ id: route.query.id })
      }]
    })

    6.自定义组件的双向绑定

    v-model 是众所周知的双向绑定。input 是默认的更新事件。可以通过 $emit 更新该值。唯一的限制是该组件需要<input> 标记才能与 value 属性绑定。

    <my-checkbox v-model="val"></my-checkbox>
    
    <template>
      <input type="checkbox" :value="value" @input="handleInputChange(value)" />
    </template>
    
    <script>
    export default {
      props: {
        value: {
          type: Boolean,
          default: false
        }
      },
      methods: {
        handleInputChange (val) {
          console.log(val)
        }
      }
    }
    </script>

    双向绑定还有另一种解决方案,即 sync 修饰符。与 v-model 不同的是,它不需要你的组件有一个 <input> 标签并将值绑定到它上面。它仅触发 update:<your_prop> 通过事件系统对属性进行突变。

    <custom-component :value.sync="value" />

    7.组件生命周期 Hook

    通常,你可以像这样监听子组件的生命周期(例如 mounted

    <!-- Child -->
    <script>
    export default {
      mounted () {
        this.$emit('onMounted')
      }
    }
    </script>
    
    <!-- Parent -->
    <template>
      <Child @onMounted="handleOnMounted" />
    </template>

    还有另一种简单的解决方案,你可以改用 @hook:mount 在Vue内部系统中使用。

    <!-- Parent -->
    <template>
      <Child @hook:mounted="handleOnMounted" />
    </template>

    8.事件监听APIs

    比如,在页面挂载时增加一个定时器,但销毁时需要清除定时器。这看起来不错。

    坦白地说,只有在 beforeDestroy 中使用 this.timer 来获取计时器ID才有意义。并非刻薄,而是变量越少,性能越好。

    export default {
      data () {
        return {
          timer: null
        }
      },
      mounted () {
        this.timer = setInterval(() => {
          console.log(Date.now())
        }, 1000)
      },
      beforeDestroy () {
        clearInterval(this.timer)
      }
    }

    使其只能在生命周期钩子内访问。使用 $once 来放弃不必要的东西。

    export default {
      mounted () {
        let timer = null
        timer = setInterval(() => {
          console.log(Date.now())
        }, 1000)
        this.$once('hook:beforeDestroy', () => {
          clearInterval(timer)
        })
      }
    }

    9.以编程方式挂载组件

    在某些情况下,以编程方式加载组件要优雅得多。例如,可以通过全局上下文 $popup()$modal.open() 打开弹出窗口或模态窗口。

    import Vue from 'vue'
    import Popup from './popup'
    
    const PopupCtor = Vue.extend(Popup)
    
    const PopupIns = new PopupCtr()
    
    PopupIns.$mount()
    
    document.body.append(PopupIns.$el)
    
    Vue.prototype.$popup = Vue.$popup = function () {
      PopupIns.open()
    }

    Element UI 实现了结构良好的模式组件,该组件允许使用自定义API来控制实例的生命周期。该理论与我上面演示的几乎相同。

    这是有关Vue 2.x的9种技术,希望在本文中你可以对使用框架有更好的了解。如果你认为本文很棒,请在其他社交网络上分享。

    想要了解更多相关知识,可访问 前端学习网站!!

    以上就是9种必备的Vue技术,不信你全知道!的详细内容,更多请关注其它相关文章!

    AA分享网一个高级程序员的学习、分享的IT资源分享平台
    AA分享网-企业网站源码-PHP源码-网站模板-视频教程-IT技术教程 » 9种必备的Vue技术,不信你全知道!

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    站壳网
    一个高级程序员模板开发平台

    发表评论

    • 74会员总数(位)
    • 2792资源总数(个)
    • 56本周发布(个)
    • 0 今日发布(个)
    • 237稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情