React技术栈支援Vue项目，你需要提前了解的

写在前面

• react整体是函数式的思想，把组件设计成纯组件，状态和逻辑通过参数传入，而vue的思想是响应式的，也就是基于是数据可变的，通过对每一个属性建立Watcher来监听， 当属性变化的时候，响应式的更新对应的虚拟dom
• react的思路通过js来生成html， 所以设计了jsx，还有通过js来操作css。vue是自己写了一套模板编译的逻辑，可以把js css html糅合到一个模板里边
• react可以通过高阶组件来扩展，而vue需要通过mixins来扩展

频繁用到的场景

1. 数据传递：父传子，父更新子如何取得新数据

父组件中有一个表单日期组件，子组件是一个弹层（弹层中有日期组件，默认值取父组件选中的日期），父组件更改日期范围后，子组件打开默认日期也需要更新。如下：ypq28资讯网——每日最新资讯28at.com

// 父组件<template>  <div>    <date-span style="flex-grow: 1" ref="dateSpanE" :noCache="true" :startDate="startDate"     :endDate="endDate" type="weekrange" @change="changeDate"></date-span>    <!-- 子弹层组件 -->    <ActiveTakeEffect ref="activeModal" :timeRange="makeActiveTime" />  </div></template><script>import DateSpan from '@/components/DateSpanE'export default {   components: { DateSpan },  // ...  data: () => {    return {      makeActiveTime: {        startDate: '',        endDate: ''       },    }  },  computed: {     startDate() {       return this.makeActiveTime.startDate     },     endDate() {       return this.makeActiveTime.endDate     }   },  methods: {    // 父组件表单日期修改时更新了传入的日期    changeDate(dateInfo) {      const { start: startDate, end: endDate } = dateInfo      this.makeActiveTime = {        startDate,        endDate      }    }  }}</script>

// 子组件<template>  <Modal v-model="showModal" width="680" title="XXX" :mask-closable="false" @on-visible-change="visibleChange"    :loading="loading">    <div class="single-effect-modal">      <div class="form-wrapper">        <date-span style="flex-grow: 1" ref="dateSpanE" :noCache="true" :startDate="startDate" :endDate="endDate"          type="weekrange" @change="changeDate"></date-span>      </div>    </div>  </Modal></template><script>import Api from '@/api_axios'import DateSpan from '@/components/DateSpanE'import { formatDate } from '@/common/util'import moment from 'moment'export default {  components: {    DateSpan  },  props: {    // 定义父组件传入的prop    timeRange: {      type: Object,      default: () => {        return {          startDate: new Date(),          endDate: moment().add(17, 'w').toDate()        }      }    }  },  data() {    return {      loading: true,      showModal: false,      // data中定义子组件日期范围组件所需的展示数据，默认取props中定义的值      timeRangeFromProps: this.timeRange    }  },  computed: {    startDate() {      return this.timeRangeFromProps.startDate    },    endDate() {      return this.timeRangeFromProps.endDate    }  },  watch: {    // 监听传入的props值，props值更改时更新子组件数据    // 若无此监听，父组件修改日期后，子组件的日期范围得不到更新    timeRange() {      this.timeRangeFromProps = this.timeRange    }  },  methods: {    changeDate(dateInfo) {      const { start: startDate, end: endDate } = dateInfo      this.timeRangeFromProps = {        startDate,        endDate      }    },    toggle(isShow) {      this.showModal = isShow    },    // ...  }}</script><style lang="less">.single-effect-modal {  .form-wrapper {    min-height: 100px;  }  .item-label {    min-width: 60px;  }}</style>

2. $parent$refs$emit

2.1 $refs访问子组件中的方法或属性

<ActiveTakeEffect ref="activeModal" :timeRange="makeActiveTime" /><script>this.$refs.activeModal.timeRangeFromProps // timeRangeFromProps是子组件中的属性this.$refs.activeModal.toggle(true) // toggle是子组件中的方法名</script>

2.1 $parent访问父组件中的方法或属性 $emit触发父组件中定义的方法

// 子组件<script>this.$parent.makeActiveTime // makeActiveTime是父组件中的属性this.$parent.changeDate({startDate:xxx, endDate: xxx}) // changeDate是父组件中的方法名</script>

// 父组件，忽略其他项<date-span @conditionChange="conditionChange"></date-span><scipt>// ...methods: {  conditionChange(controlName) {    // ...  }}// ...</script><script>// 子组件中调用this.$emit('conditionChange', 'dateSpan')</script>

3. mixins扩展使用

// itemList就是来自treeSelectMixin中定义的数据<SwitchButton :itemList="itemList" @change="toggleSelectAll"></SwitchButton><script>import mixin from './treeSelectMixin'export default {  mixins: [mixin],  components: {    Treeselect,    SwitchButton  },  // ...}</script>

4. 样式的两种写法

// 同一个.vue文件中可以出现以下两个style标签<style lang="less"></style>// 当 `<style>` 标签有 `scoped` 属性时，它的 CSS 只作用于当前组件中的元素。<style lang="less" scoped></style>

以上就是入门时困扰较多的地方~祝换乘顺利ypq28资讯网——每日最新资讯28at.com

作者：京东零售 黄晓丽ypq28资讯网——每日最新资讯28at.com

来源：京东云开发者社区 转载请注明来源ypq28资讯网——每日最新资讯28at.com

本文链接：http://www.28at.com/showinfo-26-15225-0.htmlReact技术栈支援Vue项目，你需要提前了解的

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： 别再学那些落后的 Web 开发技术了 ！

下一篇： 分布式实时处理系统的架构设计，工作原理和实现方式