vue实践推荐

props: {
　　status: {
　　　　type: String,
　　　　required: true,
　　　　validator: function (value) {
　　　　// 校验方法
　　　　　　return ***
　　　　}
　　}
}

props: {
　　greetingText: String
}
<WelcomeMessage greeting-text="hi"/>

<WelcomeMessage
　　greeting-text="hi"
　　name="hh" />

data () {
　　return {
　　　　foo: ‘bar‘
　　}
}
 
vm.$set( target, key, value )
Vue.set(vm.obj,‘k1‘,‘v1‘)
this.$set(this.obj,‘k1‘,‘v1‘)
this.obj = Object.assign({}, this.obj)
this.obj = Object.assign({}, this.obj,{‘k1‘,‘v1‘})

this.$set(this.foo,‘aProperty‘,‘aavalue‘)
Vue.set(obj, ‘newProp‘, 123)
或
state.obj = {...state.obj, newProp:123}

computed:{
　　newPrice:function(){
　　　　return this.price=‘￥‘ + this.price + ‘元‘;
　　}
}
 
 
computed:{
　　　reverseNews:function(){
　　　　return this.newsList.reverse();
　　}
}
 
把复杂计算属性分割为尽可能多的更简单的属性；
computed: {
　　basePrice: function () {
　　　　return this.manufactureCost / (1 - this.profitMargin)
　　},
　　discount: function () {
　　　　return this.basePrice * (this.discountPercent || 0)
　　},
　　finalPrice: function () {
　　　　return this.basePrice - this.discount
　　}
}

<ul>
　　<li v-for="todo in todos" :key="todo.id">
　　　　{{ todo.text }}
　　</li>
</ul>

<div v-if="error" key="search-status">
 　　{{ error }}
</div>
<div v-else key="search-results">
　　{{ results }}
</div> 

<input
　　:value="value"
　　v-bind="$attrs"
　　@input="$emit(‘input‘, $event.target.value)"
>

watch:{
　　‘$route‘(to,from){
　　// 对路由变化作出响应
　　}
}

watch:{
　　‘$route.query.id‘(){
　　　　// 请求个人信息
　　　},
　　‘$route.query.page‘(){
　　　　// 请求不同页面列表数据
　　}
}

<keep-alive>
　　<component v-bind:is="currentTabComponent" class="tab"></component>
</keep-alive>

<keep-alive>
　　<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
--------------------------------------------------------
export default {
　　 data() {
 　　　　return {};
 },
 mounted() {},
 methods: {},
 beforeRouteLeave(to, from, next) {
 　　if (to.path == "/index") {
 　　　　to.meta.keepAlive = true;
 　　} else {
 　　　　to.meta.keepAlive = false;
　　 }
　　 next();
 }
};
 

// keepalive组件选项
var KeepAlive = {
　　name: ‘keep-alive‘,
　　// 抽象组件的标志
　　abstract: true,
　　// keep-alive允许使用的props
　　props: {
　　　　include: patternTypes,
　　　　exclude: patternTypes,
　　　　max: [String, Number]
　　},
 
created: function created () {
　　// 缓存组件vnode
　　this.cache = Object.create(null);
　　// 缓存组件名
　　this.keys = [];
},
 
destroyed: function destroyed () {
　　// destroyed钩子中销毁所有cache中的组件实例
　　for (var key in this.cache) {
　　　　pruneCacheEntry(this.cache, key, this.keys);
　　}
},
 
mounted: function mounted () {
　　var this$1 = this;
　　// 动态include和exclude
　　// 对include exclue的监听
　　this.$watch(‘include‘, function (val) {
　　　　pruneCache(this$1, function (name) { return matches(val, name); });
　　});
　　this.$watch(‘exclude‘, function (val) {
　　　　pruneCache(this$1, function (name) { return !matches(val, name); });
　　});
},
// keep-alive的渲染函数
render: function render () {
　　// 拿到keep-alive下插槽的值
　　var slot = this.$slots.default;
　　// 第一个vnode节点
　　var vnode = getFirstComponentChild(slot);
　　// 拿到第一个组件实例
　　var componentOptions = vnode && vnode.componentOptions;
　　// keep-alive的第一个子组件实例存在
　　if (componentOptions) {
　　// check pattern
　　//拿到第一个vnode节点的name
　　　　var name = getComponentName(componentOptions);
　　　　var ref = this;
　　　　var include = ref.include;
　　　　var exclude = ref.exclude;
　　　　// 通过判断子组件是否满足缓存匹配
　　　　if ((include && (!name || !matches(include, name))) ||(exclude && name && matches(exclude, name))) {
　　　　　　return vnode
　　　　}
 
　　　　var ref$1 = this;
　　　　var cache = ref$1.cache;
　　　　var keys = ref$1.keys;
　　　　var key = vnode.key == null ? componentOptions.Ctor.cid + (componentOptions.tag ? ("::" + (componentOptions.tag)) : ‘‘) : vnode.key;
　　　　// 再次命中缓存
　　　　if (cache[key]) {
　　　　　　vnode.componentInstance = cache[key].componentInstance;
　　　　　　// make current key freshest
　　　　　　remove(keys, key);
　　　　　　keys.push(key);
　　　　} else {
　　　　　　// 初次渲染时，将vnode缓存
　　　　　　cache[key] = vnode;
　　　　　　keys.push(key);
　　　　　　// prune oldest entry
　　　　　　if (this.max && keys.length > parseInt(this.max)) {
　　　　　　　　pruneCacheEntry(cache, keys[0], keys, this._vnode);
　　　　　　}
　　　　}
　　　　// 为缓存组件打上标志
　　　　vnode.data.keepAlive = true;
　　}
　　// 将渲染的vnode返回
　　　　return vnode || (slot && slot[0])
　　}
};

data() {
　　return {
　　　　message: ‘数据更新前no‘
　　}
},
edit(){
　　this.message = ‘数据更新后have‘;
　　console.log(document.getElementById(‘message‘).innerHTML);
　　//数据更新前no
　　this.$nextTick(() => {
　　　　// 这个函数就是有了数据之后，渲染完成之后会执行，也就是说当你需要数据先渲染，
　　　　// 然后去操作渲染完成之后的dom，要把操作dom的逻辑写在这个函数里面
　　　　console.log(document.getElementById(‘message‘).innerHTML);
　　　　// 数据更新后have1
　　});
　　this.message = ‘数据更新后have1‘;
}
// 多次修改了状态，但其实Vue只会渲染一次

update() {
　　if(this.lazy) {
　　　　this.dirty = true
　　} else if(this.sync) {
　　　　/*同步执行则run直接渲染视图*/
　　　　this.run()
　　} else {
　　　　/*异步则推送到观察者队列中,下一个tick时调用*/
　　　　queueWatcher(this)
　　}
}
// queueWatcher函数
// 将观察者对象push进队列,并记录观察者的id
// 如果对应的观察者已存在,则跳过,避免重复的计算
export function queueWatcher(watcher: Watcher) {
　　const id = watcher.id
　　if(!has[id]) {
　　　　has[id] = true
　　　　if(!flushing) {
　　　　　　/*如果没有被flush掉,直接push到队列中即可*/
　　　　　　queue.push(watcher)
　　　　} else {
　　　　　　var i = queue.length - 1;
　　　　　　while (i > index && queue[i].id > watcher.id) {
　　　　　　　　i--;
　　　　}
　　　　queue.splice(i + 1, 0, watcher);
　　}
// queue the flush
　　if(!wating) {
　　　　wating = true
　　　　nextTick(flushSchedulerQueue)
　　}
　　}
}