vue注意事项

发表于

vue注意事项

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
生命周期方法
1. beforeCreate 还没有创建data， methods， 以及watch等和el元素
2. created 该方法中可以获取data methods watch了 但是el为空
3. beforeMount 该方法可以有虚拟dom
beforeMount -> mounted就是虚拟dom转为真实dom的过程
    该过程才是真实的去渲染dom， 渲染是如何发现dom中有渲染的数据在data中没有就会报错,
    如data中并没有ddd这个属性值。 但是dom中渲染{{ddd}}， 会在这个过程会报错。
4. mounted 该方法中真实的dom已经渲染完毕了。可以获取dom元素了。
5. beforeUpdate  更新dom之前。。。
6. updated  更新dom之后。。。
7. beforeDestory 销毁dom之前...
8. destroyed 销毁dom之后...

注意：生命周期的方法都是顺序执行的。如果再created或者mounted方法中有ajax请求操作。也不能阻塞生命周期方法的执行流程。


v-if 会缓存值，直到v-if的值 变为true才会第一次渲染， 改变值会不断的从dom中进行重绘和移除该元素。
v-show 不会缓存值，会直接在虚拟dom转换为真实dom的过程中被渲染。本质就是改变他的display为none和block。
v-for 的渲染机制。v-for="item in items" 如果items为空或者item为空就会先缓存该元素，等待item和items有值后才会重新渲染。


以及格式化时间等操作。可以用filter操作。也可以在computed里面做， 
因为computed里面的属性会缓存下来，直到该属性依赖的值发生变化之后才会重新调取该属性的getter方法。
而不是像在methods中定义格式化的方法。每次渲染时都会调用methods里面格式化的方法。

watch方法里面可以用来监听某一属性。如$route。 '$route'(to, from) {//路由发生变化调用其他的操作}

动态切换组件, 通过改变diff的值。diff的值为一个组件哦！
<p :is="diff"></p>

import Vue from 'vue';
let a = {name: 'vueset', age: 12};
// 注意这样赋值是不会更新dom的。
// this.friends[0] = a;
// 这样才有效果。
Vue.set(this.friends, 0, a);


vue和react本质差不多。
react中有props传值和 state属性绑定dom， 路由： react-router-dom， 数据中心 redux, react-redux,
vue中也有props传值和 data属性绑定dom， 路由： vue-router， 数据中心 vuex
但是
vue里面有双向数据绑定, 普通的js语法
react里面只能是单向数据流，jsx语法，redux使得视图渲染和事件绑定分离。
    （component负责视图渲染）和（container负责事件操作以及绑定对应component，connect(mapStateToProps, mapDisPatchToProps)(component)）