来自 前端知识 2019-11-28 13:24 的文章
当前位置: 金沙澳门官网网址 > 前端知识 > 正文

Vue和Wechat小程序的界别,深切探究前端组件化开

可配置性

一个组件,要明确它的输入和输出分别是什么。

组件除了要展示默认的内容,还需要做一些动态的适配,比如:一个组件内有一段文本,一个图片和一个按钮。那么字体的颜色、图片的规则、按钮的位置、按钮点击事件的处理逻辑等,都是可以做成可配置的。

要做可配置性,最基本的方式是通过属性向组件传递配置的值,而在组件初始化的声明周期内,通过读取属性的值做出对应的显示修改。还有一些方法,通过调用组件暴露出来的函数,向函数传递有效的值;修改全局 CSS样式;向组件传递特定事件,并在组件内监听该事件来执行函数等。

在做可配置性时,为了让组件更加健壮,保证组件接收到的是有效的属性、函数接收到的是有效的参数,需要做一些校验。

一. 属性的值的校验

对属性的值进行校验,一般要考虑以下几个方面。

1.属性值的类型是否是有效的。如果某个属性要求传递一个数组,那么传递过来的值不是数组时,就要抛出异常,并给出对应的提示。

2.属性是否是必填的。有的属性的值,是组件内不可缺少的时,就要是必填的,在组件初始化时要做是否传递的检查,如果没有传递,则需要抛出异常,并给出相应的提示。如果属性不是必填的,可以设定一个默认值,当属性没有被设置时,就使用默认值。

得益于 React、Vue 内部实现的属性检查,且这些属性检查会在组件初始化阶段默认执行,你可以很容易的给组件设置属性的检查。React 中可以使用 React.PropTypes 进行类型检查设置,Vue 中只需要给组件设置 props 即可。

在 React 中进行类型检查:

// title.jsx (Title组件) import React, { Component, PropTypes } from 'react'; export default class Title extends Component { constructor(props) { super(props); } static propTypes = { title: PropTypes.string.isRequired } render() { const { title } = this.props; return ( <p>{ title }</p> ) } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// title.jsx (Title组件)
  import React, { Component, PropTypes } from 'react';
 
  export default class Title extends Component {
    constructor(props) {
      super(props);
    }
 
    static propTypes = {
      title: PropTypes.string.isRequired
    }
 
    render() {
      const { title } = this.props;
 
      return (
        <p>{ title }</p>
      )
    }
  }

在 Vue 中进行类型检查:

// title.vue (Title组件) <template> <p>{{ title }}</p> </template> <script> export default { props: { title: { type: String, required: true } } } </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// title.vue (Title组件)
  <template>
    <p>{{ title }}</p>
  </template>
 
  <script>
    export default {
      props: {
        title: {
          type: String,
          required: true
        }
      }
    }
  </script>

二. 函数的参数的校验

函数的参数校验,只要按照传统的方法进行校验即可。在函数内部顶部判断参数的值和类型,如果不满足要求,则抛出异常,并给出相应的提示。

判断一个函数的第一个必填,且为 String 格式

// ES6 语法 changeTitle(title) { if (typeof title !== 'string') { throw new Error('必须传入一个 title,才能修改 title。') } // 满足条件,可以进行修改 this.title = title // vue 语法 this.setState({ // react 语法,修改state的值 title }) }

1
2
3
4
5
6
7
8
9
10
11
// ES6 语法
  changeTitle(title) {
    if (typeof title !== 'string') {
      throw new Error('必须传入一个 title,才能修改 title。')
    }
    // 满足条件,可以进行修改
    this.title = title   // vue 语法
    this.setState({      // react 语法,修改state的值
      title
    })
  }

1.子组件的使用

vue中,需要:

  1. 编写子组件
  2. 在需要使用的父组件中通过import引入
  3. vuecomponents中注册
  4. 在模板中使用

 

//子组件 bar.vue <template> <div class="search-box"> <div @click="say" :title="title" class="icon-dismiss"></div> </div> </template> <script> export default{ props:{ title:{ type:String, default:'' } } }, methods:{ say(){ console.log('明天不上班'); this.$emit('helloWorld') } } </script> // 父组件 foo.vue <template> <div class="container"> <bar :title="title" @helloWorld="helloWorld"></bar> </div> </template> <script> import Bar from './bar.vue' export default{ data:{ title:"我是标题" }, methods:{ helloWorld(){ console.log('我接收到子组件传递的事件了') } }, components:{ Bar } </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
//子组件 bar.vue
<template>
  <div class="search-box">
    <div @click="say" :title="title" class="icon-dismiss"></div>
  </div>
</template>
<script>
export default{
props:{
    title:{
       type:String,
       default:''
      }
    }
},
methods:{
    say(){
       console.log('明天不上班');
       this.$emit('helloWorld')
    }
}
</script>
 
// 父组件 foo.vue
<template>
  <div class="container">
    <bar :title="title" @helloWorld="helloWorld"></bar>
  </div>
</template>
 
<script>
import Bar from './bar.vue'
export default{
data:{
    title:"我是标题"
},
methods:{
    helloWorld(){
        console.log('我接收到子组件传递的事件了')
    }
},
components:{
    Bar
}
</script>

小程序中,需要:

  1. 编写子组件
  2. 在子组件的json文件中,将该文件声明为组件
{ "component": true }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6a1146bfc908165305-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a1146bfc908165305-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6a1146bfc908165305-3">
3
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6a1146bfc908165305-1" class="crayon-line">
{
</div>
<div id="crayon-5b8f6a1146bfc908165305-2" class="crayon-line crayon-striped-line">
  &quot;component&quot;: true
</div>
<div id="crayon-5b8f6a1146bfc908165305-3" class="crayon-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>
  1. 在需要引入的父组件的json文件中,在usingComponents填写引入组件的组件名以及路径
"usingComponents": { "tab-bar": "../../components/tabBar/tabBar" }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6a1146bff494634246-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a1146bff494634246-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6a1146bff494634246-3">
3
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6a1146bff494634246-1" class="crayon-line">
&quot;usingComponents&quot;: {
</div>
<div id="crayon-5b8f6a1146bff494634246-2" class="crayon-line crayon-striped-line">
    &quot;tab-bar&quot;: &quot;../../components/tabBar/tabBar&quot;
</div>
<div id="crayon-5b8f6a1146bff494634246-3" class="crayon-line">
  }
</div>
</div></td>
</tr>
</tbody>
</table>
  1. 在父组件中,直接引入即可
&lt;tab-bar currentpage="index"&gt;&lt;/tab-bar&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6a1146c02109159426-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6a1146c02109159426-1" class="crayon-line">
&lt;tab-bar currentpage=&quot;index&quot;&gt;&lt;/tab-bar&gt;
</div>
</div></td>
</tr>
</tbody>
</table>


具体代码:  


// 子组件 &lt;!--components/tabBar/tabBar.wxml--&gt; &lt;view
class='tabbar-wrapper'&gt; &lt;view class='left-bar
{{currentpage==="index"?"active":""}}' bindtap='jumpToIndex'&gt;
&lt;text class='iconfont icon-shouye'&gt;&lt;/text&gt;
&lt;view&gt;首页&lt;/view&gt; &lt;/view&gt; &lt;view
class='right-bar {{currentpage==="setting"?"active":""}}'
bindtap='jumpToSetting'&gt; &lt;text class='iconfont
icon-shezhi'&gt;&lt;/text&gt; &lt;view&gt;设置&lt;/view&gt;
&lt;/view&gt; &lt;/view&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6a1146c06935082908-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a1146c06935082908-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6a1146c06935082908-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a1146c06935082908-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6a1146c06935082908-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a1146c06935082908-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f6a1146c06935082908-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a1146c06935082908-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f6a1146c06935082908-9">
9
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a1146c06935082908-10">
10
</div>
<div class="crayon-num" data-line="crayon-5b8f6a1146c06935082908-11">
11
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a1146c06935082908-12">
12
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6a1146c06935082908-1" class="crayon-line">
// 子组件
</div>
<div id="crayon-5b8f6a1146c06935082908-2" class="crayon-line crayon-striped-line">
&lt;!--components/tabBar/tabBar.wxml--&gt;
</div>
<div id="crayon-5b8f6a1146c06935082908-3" class="crayon-line">
&lt;view class='tabbar-wrapper'&gt;
</div>
<div id="crayon-5b8f6a1146c06935082908-4" class="crayon-line crayon-striped-line">
  &lt;view class='left-bar {{currentpage===&quot;index&quot;?&quot;active&quot;:&quot;&quot;}}' bindtap='jumpToIndex'&gt;
</div>
<div id="crayon-5b8f6a1146c06935082908-5" class="crayon-line">
    &lt;text class='iconfont icon-shouye'&gt;&lt;/text&gt;
</div>
<div id="crayon-5b8f6a1146c06935082908-6" class="crayon-line crayon-striped-line">
    &lt;view&gt;首页&lt;/view&gt;
</div>
<div id="crayon-5b8f6a1146c06935082908-7" class="crayon-line">
  &lt;/view&gt;
</div>
<div id="crayon-5b8f6a1146c06935082908-8" class="crayon-line crayon-striped-line">
  &lt;view class='right-bar {{currentpage===&quot;setting&quot;?&quot;active&quot;:&quot;&quot;}}' bindtap='jumpToSetting'&gt;
</div>
<div id="crayon-5b8f6a1146c06935082908-9" class="crayon-line">
    &lt;text class='iconfont icon-shezhi'&gt;&lt;/text&gt;
</div>
<div id="crayon-5b8f6a1146c06935082908-10" class="crayon-line crayon-striped-line">
    &lt;view&gt;设置&lt;/view&gt;
</div>
<div id="crayon-5b8f6a1146c06935082908-11" class="crayon-line">
  &lt;/view&gt;
</div>
<div id="crayon-5b8f6a1146c06935082908-12" class="crayon-line crayon-striped-line">
&lt;/view&gt;
</div>
</div></td>
</tr>
</tbody>
</table>

专一

要想设计一个好的组件,组件也需要专一

设计组件要遵循一个原则:一个组件只专注做一件事,且把这件事做好

一个功能如果可以拆分成多个功能点,那就可以将每个功能点封装成一个组件,当然也不是组件的颗粒度越小越好,只要将一个组件内的功能和逻辑控制在一个可控的范围内即可。

举个例子。页面上有一个 Table 列表和一个分页控件,就可以将 Table 封装为一个组件,分页控件 封装成一个组件,最后再把 Table组件 和 分页组件 封装成一个组件。Table 组件还可以再拆分成多个 table-column 组件,及展示逻辑等。

数据请求

在页面加载请求数据时,两者钩子的使用有些类似,vue一般会在created或者mounted中请求数据,而在小程序,会在onLoad或者onShow中请求数据。

组件化开发的优点

说到底,前端的组件化开发,可以很大程度上降低系统各个功能的耦合性,并且提高了功能内部的聚合性。这对前端工程化及降低代码的维护来说,是有很大的好处的。

耦合性的降低,提高了系统的伸展性,降低了开发的复杂度,提升开发效率,降低开发成本。

组件封装的好,加班也少了,bug 也少了,就有更多时间喝喝咖啡、打打农药了。:)图片 1

九、废话

还有好多地方没写,之后再慢慢加上、精简。感觉自己写的有点冗余,大佬勿喷!!!
如果觉得有帮助,希望帮忙点个赞和收藏

图片 2

1 赞 2 收藏 评论

图片 3

事件传递

Vue 中传递事件很简单,只需要在子组件内使用 this.$emit(‘event1’) 即可向外传递一个事件 event1,在父组件调用该子组件时,只需要监听 event1 事件,并给出对应事件处理逻辑即可。

Vue中事件传递

Vue子组件定义 child-component.vue

Vue.component('child-component', { methods: { emitEvent() { this.$emit('event1', 'This is a event.') } }, mounted() { this.emitEvent() } })

1
2
3
4
5
6
7
8
9
10
Vue.component('child-component', {
  methods: {
    emitEvent() {
      this.$emit('event1', 'This is a event.')
    }
  },
  mounted() {
    this.emitEvent()
  }
})

Vue 父组件调用子组件

<template> <div> <child-component @event1="eventHandler" /> </div> </template> <script> import childComponent from './child-component' export default { components: { childComponent }, methods: { eventHandler(event) { console.log(event) } } } </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
  <div>
    <child-component @event1="eventHandler" />
  </div>
</template>
 
<script>
  import childComponent from './child-component'
  export default {
    components: {
      childComponent
    },
    methods: {
      eventHandler(event) {
        console.log(event)
      }
    }
  }
</script>

而在 React 中,官方没有给出组件间的事件传递解决方案,这也是 React 中比较坑的一点。不过,还是可以使用其他方式来实现。

React 中,父组件可以使用 props 向子组件传值,而子组件向父组件传值,需要在父组件内定义函数并通过属性传递给子组件,在子组件内通过调用该属性对应的函数,传入参数,传递给父组件内的函数,并在父组件的该函数中做逻辑的处理。

React 子组件定义 child-component.js

class ChildComponent extends React.Components { render() { return ( <button onClick={ () => { this.props.clickHandler('This is a click') } }></button> ) } }

1
2
3
4
5
6
7
8
9
10
11
class ChildComponent extends React.Components {
  render() {
    return (
      <button onClick={
        () => {
          this.props.clickHandler('This is a click')
        }
      }></button>
    )
  }
}

React 父组件调用子组件

import ChildComponent from './child-component' class ParentComponent extends React.Components { clickHandler(message) { console.log(message) } render() { return ( <child-component clickHandler={ this.clickHandler.bind(this) } /> ) } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import ChildComponent from './child-component'
 
class ParentComponent extends React.Components {
  clickHandler(message) {
    console.log(message)
  }
 
  render() {
    return (
      <child-component
        clickHandler={ this.clickHandler.bind(this) }
        />
    )
  }
}

Vue和微信小程序的区别、比较

2018/08/04 · 基础技术 · Vue, 小程序

原文出处: 卖女孩的小火柴   

写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别。

生命周期

一个组件,需要明确知道在生命周期的不同阶段做该做的事。

初始化阶段,读取属性的值,如果需要做数据和逻辑处理的话,在这个阶段进行。

属性值变化时,如果属性发生变化,且需要对变化后的数据进行处理的话,在这个阶段进行处理。

组件销毁阶段,如果组件已经创建了一些可能会对系统产生一些副作用的东西,可以在这个阶段进行清除。比如 timeInterval、timeout 等。

如果组件在渲染的时候报错,需要展示错误信息。React v16 中提供了 componentDidCatch 生命周期函数,Vue v2.5 中提供了 errorCaptured 的钩子函数。

React 中提供了一些生命周期函数:componentWillMount,componentDidMount,componentWillReceiveProps,shouldComponentUpdate,componentWillUpdate,componentDidUpdate,render,componentWillUnmount,componentDidCatch(React v16)。

Vue 中提供了一些生命周期函数:beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed,errorCapture,errorCaptured(Vue v2.5)。

每个生命周期的具体用法,请参考官方详细文档。

二、数据绑定

VUE:vue动态绑定一个变量的值为元素的某个属性的时候,会在变量前面加上冒号:,例:

<img :src="imgSrc"/>

1
<img :src="imgSrc"/>

小程序:绑定某个变量的值为元素属性时,会用两个大括号括起来,如果不加括号,为被认为是字符串。例:

<image src="{{imgSrc}}"></image>

1
<image src="{{imgSrc}}"></image>

 

相关往期文章

Vue v2.5 调整和更新不完全详解

React 16引入新概念“异常边界”,让你更好的处理模块内异常

用Next.js快速上手React服务器渲染

前后端分离后的前端时代

1 赞 1 收藏 评论

图片 4

vue生命周期

图片 5

后记

前端组件化开发的实践,是一个很长的过程,坚持并持续优化,带动系统整体的优化。

后面会再更新文章,讲讲“怎么开发一个 vue 第三方组件”。

后续还会写更多关于 React 和 Vue 的文章,欢迎关注。

一、生命周期

先贴两张图:

什么是前端组件化开发

首先,我们要搞明白什么是前端组件化开发?

你应该遇到过,将一个页面的几百行,甚至上千行的代码逻辑写在一个 js 文件中的情况。通常这种代码都很难读下去,更别说要维护起来,添加新功能,移除一些老功能了,因为你不知道改动一个地方,会不会出现意想不到的 bug。

这个时候,你就需要利用组件化开发,拆分功能,封装组件,单独维护。

现代化前端框架通常都是实现 MVVM 的方案,数据层(M)和 视图层(V)相互连接,同时变更,使得页面交互保持高度的一致性。

如果你熟悉 Java,Python,Go 等后端开发语言,你应该对 package (包)的概念很熟悉,前端的组件化在概念上与后端的 package 很相似,只不过前端的组件涉及到更多的是展示和交互方面的逻辑。当然,前端组件与后端架构的微服务概念类似,可以理解成一个组件就是一个服务组件,只提供某个服务。

前端组件化开发,就是将页面的某一部分独立出来,将这一部分的 数据层(M)、视图层(V)和 控制层(C)用黑盒的形式全部封装到一个组件内,暴露出一些开箱即用的函数和属性供外部组件调用。

一个前端组件,包含了 HTML、CSS、JavaScript,包含了组件的模板、样式和交互等内容,基本上涵盖了组件的所有的内容,外部只要按照组件设定的属性、函数及事件处理等进行调用即可,完全不用考虑组件的内部实现逻辑,对外部来说,组件是一个完全的黑盒。

组件可以多层封装,通过调用多个小组件,最后封装成一个大组件,供外部调用。比如:一个 Input 输入框 是一个组件,一个 Select下拉选择框 也是一个组件,可以用 form 在这两个组件上包装一层,就是一个 Form 的组件

有一些比较常用的前端组件,像 vue-router,vuex,react-router,redux,mobx 等,都是基于 Vue 和 React 的组件,它们只专注于 路由、状态存储 的工作,并且把这些事情做好。

只要利用好组件化开发,开发一个页面,就像是搭积木一样,将各个组件拼接到一起,最后融合到一起,就是一个完整的系统。

八、父子组件通信

怎么设计一个组件

既然前端组件化开发这么好,那要怎么设计一个好的组件呢?

经过多次实践,总结了一些组件设计时的要点。

1.设置值

vue中,只需要再表单元素上加上v-model,然后再绑定data中对应的一个值,当表单元素内容发生变化时,data中对应的值也会相应改变,这是vue非常nice的一点。

JavaScript

<div id="app"> <input v-model="reason" placeholder="填写理由" class='reason'/> </div> new Vue({ el: '#app', data: { reason:'' } })

1
2
3
4
5
6
7
8
9
10
<div id="app">
    <input v-model="reason" placeholder="填写理由" class='reason'/>
</div>
 
new Vue({
  el: '#app',
  data: {
   reason:''
  }
})

但是在小程序中,却没有这个功能。那怎么办呢?

当表单内容发生变化时,会触发表单元素上绑定的方法,然后在该方法中,通过this.setData({key:value})来将表单上的值赋值给data中的对应值。

下面是代码,可以感受一下:

JavaScript

<input bindinput="bindReason" placeholder="填写理由" class='reason' value='{{reason}}' name="reason" /> Page({ data:{ reason:'' }, bindReason(e) { this.setData({ reason: e.detail.value }) } })

1
2
3
4
5
6
7
8
9
10
11
12
<input bindinput="bindReason" placeholder="填写理由" class='reason' value='{{reason}}' name="reason" />
 
Page({
data:{
    reason:''
},
bindReason(e) {
    this.setData({
      reason: e.detail.value
    })
  }
})

当页面表单元素很多的时候,更改值就是一件体力活了。和小程序一比较,vuev-model简直爽的不要不要的。

深入探讨前端组件化开发

2017/11/02 · 基础技术 · 组件化

原文出处: 前端微志   

图片 6

前端组件化开发,已经有多年的历史了,不管是服务端渲染,还是前端SPA,都有了比较成熟的组件化开发的方案。
随着组件化开发的普及,前端社区中贡献了很多不错的前端组件,都提供开箱即用的方案,使得更好的发挥组件化的优势。
前端团队内,如果有人对前端组件化的理解不够深入,就不能开发出好的组件,会给项目的维护带来更大的成本。
阅读全文约 8 分钟。

作者:zollero

本文首发于:
知乎专栏 前端微志
微信公众号 前端微志


这几年,从陷入 “React、Vue 和 Angular 哪个性能好?”的争论,到现在的各个框架(库)的生态越来越完善,讨论性能差距已经没有价值了。而国内的前端娱乐圈,最火的就是 React 和 Vue 了,而 Angular 由于历史原因,在国内的占有率确实不高。

随着前端生态 jade、less、scss、typeScript 和 webpack 等工具的完善,前端的组件化开发效率已经有了很大的提升。

特别是像 Ant Design、Element UI、iView 这些优秀的前端组件库的流行,更是将组件化开发发挥到了极致。开发一个前端页面已经变得非常的高效,特别是在做管理系统的页面,脚手架搭建、添加依赖包、配置路由、创建页面、引入组件,很快的就可以构建一个系统。

如果你需要 SEO,React 和 Vue 的 SSR 框架 Next.js 和 Nuxt.js 更是提供了开箱即用的集成方案,也使开发“同构页面系统“(Google It)变得更加简单。

下面切入正题,深入探讨下前端组件。

2.父子组件间通信

本文由金沙澳门官网网址发布于前端知识,转载请注明出处:Vue和Wechat小程序的界别,深切探究前端组件化开

关键词: