React程序员初试Vue

之前所做的网站开发基本都是基于 React 的，最近接触了一点 Vue 框架，虽然二者都是组件化且以数据来驱动视图的，但是写法上还是有较多差异的，所以想试试用 Vue 实现一个列表以及表单创建页面，那么现在就开始吧

Vue安装

Vue的安装方式有很多，比如独立版本，CDN 等等。本次采用的是 npm 方法，在命令行输入 npm install vue，之后：

# 全局安装 vue-cli
npm install --global vue-cli
# 创建一个基于webpack模板的新项目
vue init webpack my-list
# 接下来是一些基础配置，默认即可

进入项目，安装并运行

cd my-list
npm install
npm run dev

接下来我们就可以进入开发模式啦

开发

Vue 提供了两种 API 风格：选项式 API 和组合式 API，还有两种编写模式：SFC 模式和 HTML 模式。作为初学者我选用了比较友好的选项式 API 和 SFC（单文件组件）编写模式。

公共组件 Header

通过 components 关键字将公共组件引入 App.vue

应用 v-for 指令较容易的实现了列表渲染，那如何将标签与页面地址对应起来呢？ 这就需要用到 Vue 的生命周期钩子：beforeMount（在组件被挂载之前调用）和 mounted（在组件被挂载之后调用），在这两个里面调用更新页面地址的方法，可以保证在页面进入、刷新或点击跳转时即时获取页面地址，并匹配当前标签。

export default {
  data () {
    return {
      pageHash: ''
    }
  },
  beforeMount () {
    this.updatePageLocation()
  },
  mounted () {
    window.addEventListener('hashchange', this.updatePageLocation)
  },
  methods: {
    updatePageLocation () {
      this.pageHash = window.location.hash
    }
  }
}

列表页面

• 数据请求，列表主体部分的数据通过请求获取。

Axios 是一个基于 promise 的网络请求库，可以在 Vue 框架下进行异步通信。下载 Axios 库并在 main.js 全局引入，就可以在单文件组件中通过 this.axios 调用 Axios 库，来发送 GET 或 POST 请求。

npm install --save axios vue-axios // 下载安装

// 入口文件引入
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

• 批量删除，对勾选的商品执行删除操作

首先通过 checkbox 实现一个列表商品勾选 / 全选功能。v-bind 和 v-on 可以对复选框进行双向绑定。如果只更新一个基础类型的组件属性，可以直接赋值，那更新如商品列表这样的数组要怎么做呢？ React 里都可以通过 setState 完成更新，在 Vue 则可以直接使用数组的变更方法，如果遇到非变更方法时，就要将旧的替换成新的：

methods: {
    onCheckChange (index) {
      let products = this.products
      products[index].checked = !products[index].checked
      this.products = [...products]
      this.allChecked = this.products.every(product => (product.checked))
    },
    onAllCheckChange () {
      this.allChecked = !this.allChecked
      this.products.forEach((product) => {
        product.checked = this.allChecked
      })
      this.products = [...this.products]
    }
  }

然后删除按钮的显示隐藏是根据是否有商品被勾选决定的，这就可以用到 Vue 的计算属性 computed 和条件渲染 v-if。计算属性会自动跟踪其计算中所使用到的其他响应式状态，并将它们收集为自己的依赖，计算结果会被缓存，并只有在其依赖发生改变时才会被自动更新。

<button class="button" v-if="hasChecked">Delete</button>

computed: {
  hasChecked () {
    return this.products.some(product => (product.checked))
  }
}

创建页面

利用 Grid 布局实现了创建页的页面渲染

处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量，这个可以通过手动连接值绑定和更改事件监听器实现。Vue 还提供了一个 v-model 指令，页面中的商品属性值绑定组件 data 数据就简化很多。

<input type="text" v-model="productName">

不过在这个表单中，CategoryL2 选项是根据 CategoryL1 的选定而动态决定的，CategoryL1 的输入就直接使用 select 事件监听器和手动 value 绑定比较好。因为 v-model 指令是在 select 的 change 事件之后触发的，同时使用不容易保证信息的同步，也可能导致多次触发绑定。

<select :value="categoryLevelOne" @change="onSelectChange">
  <option value="" disabled>Please Select</option>
  <option v-for="(category, index) in categories" :key="index" :value="category.id" >
    {{ category.categoryName }}
  </option>
</select>

onSelectChange (e) {
  let categoryId = Number(e.target.value)
  this.categoryLevelOne = categoryId
  this.seCategories = this.categoryMap[categoryId].children
}

小结

初试 Vue，觉得写法上比 React - JSX 更简洁一些，比如v-model，就可以用一行代码代替 value 绑定和事件监听，还有如果需要循环一个巨大的数组并做许多计算逻辑时，计算属性 computed 的缓存也可以避免重复多次的执行。不过 React 里 JSX 由于是 JavaScript 的语法扩展，不需要专门学习模块语法中的一些指令，可能对于学习和理解容易一点。

本次的列表和商品创建页的实现，让我对 Vue 框架有了些基础的认识，后面可以更深入的学习一下，比如如何引入 Store 进行公共状态管理、如何在父子组件传递数据等，以能够处理更加复杂的页面逻辑。