vue知识浅析

来源：互联网发布：android内存优化方法编辑：程序博客网时间：2024/06/03 19:40

本文翻译自这里哦http://vuejsdevelopers.com/2017/05/28/switch-from-react-to-vue-js/

react和Vue有哪些区别？

react和Vue相较于不同点，它们实则有许多相似点：

都是一种构建ui的js框架；
都是轻量级的；
都是基于组件化的设计思想；
都采用了虚拟Dom（Vue应该指的2）；
都能被webpack打包成一个单独的html文件或者一个模块；
都使用了路由，状态管理的库。

他们主要的区别在于，Vue通常采用了html模板抽离页面公共部分，而react的公共组件部分都是基于js编写，并且Vue有可变状态，并且能够自动重新绘制，这被称作‘反应性’。

下面从细节进行分析：

components

随着Vue.js的更新，components含有一个api方法.component，它含有两个参数一个id，另一个可选的自定义的一个对象。官方在此

Vue.component('my-component', {  // Props  props: [ 'myprop' ],  // Local state  data() {    return {      firstName: 'John',      lastName: 'Smith'    }  },  // Computed property  computed: {    fullName() {      return this.firstName + ' ' + this.lastName;    }  },  // Template  template: `    <div>      <p>Vue components typically have string templates.</p>      <p>Here's some local state: {{ firstName }}</p>      <p>Here's a computed value: {{ fullName }}</p>      <p>Here's a prop passed down from the parent: {{ myprop }}</p>    </div>  `,  // Lifecycle hook  created() {    setTimeout(() => {      this.message = 'Goodbye World'    }, 2000);  }});

Template

从上面的实例可以注意到组件有一个template属性，就是一包含html标签标记的字符串，在运行时，vue的编译器能够将template编译成render function，在virtualDom中挂载。当然，你也可以使用jsx语法。

Lifecycle hooks

vue和react的组件一样都有生命周期的钩子，例如，有一个created钩子会在组件加载但是还未在页面加载完成的时候触发，和react组件一个很大的区别是，vue的组件没有shouldComponentUpdate 方法，因为vue是reactivity 的。

Re-rendering

在初始化中，vue会走一遍data属性，并将它们转换成getters和setters,如下所示：
这里写图片描述

Vue在访问或修改属性时添加了这些getter和setter以启用依赖关系跟踪和更改通知。

Mutable state

改变组件的状态，你不要使用setState方法，只需要将改变的值重新赋值即可。

// Reactthis.setState({ message: 'Hello World' });// Vuethis.message = 'Hello World';

当message的值发生改变时，会触发它的setters方法更新现有的值，但这也会产生下一步操作，通知vue值已经改变，并且可能需要重新渲染对改值有依赖的部分。

如果message的值通过prop传递给其他子组件，vue便会知道这个值，其他组件有依赖，便会自动渲染对改值有依赖的部分。这也就是为什么vue没有shouldComponentUpdate钩子的一个原因。

Main template

对于主模板文件，Vue更像Angular。与React一样，Vue需要安装在页面的某个位置。

<body>  <div id="root"></div></body>

// ReactReactDOM.render('...', document.getElementById('root'));// Vuenew Vue({  el: '#root'});

但和react的区别是，你依然可以在根文件index.html的里添加东西。

<div id="root">  <div>You can add more markup to index.html</div>  <my-component v-bind:myprop="myval"></my-component></div>

Directives

再次，像Angular一样，Vue允许您通过“指令”逻辑来增强您的模板。这些是具有v-前缀的特殊HTML属性，例如。 v-if用于条件呈现和v-bind将表达式绑定到常规HTML属性。

new Vue({  el: '#app',  data: {    mybool: true,    myval: 'Hello World'  }});

<div id="app">  <div v-if="mybool">This renders if mybool is truthy.</div>  <my-component v-bind:myprop="myval"></my-component></div>

分配给指令的值是一个JavaScript表达式，因此可以引用数据属性，包括三元运算符等。

细节性知识还请移步官方文档：https://cn.vuejs.org/

阅读全文

0 0