vue2下

自定义指令

<div id="app">
            <input v-fixed v-focus type="text" placeholder="请输入内容">
        </div>
        <script src="vue.js"></script>
        <script>
        /*
        1.内嵌指令
        v-text:更新文本
        v-html：innerHtml
        v-if:条件判断 v-else-if v-else
        v-show:条件判断
        v-for:列表渲染
        v-model：数据双向绑定
        v-on:监听dom事件
        v-bind:class,id,style,html标签上属性的一个绑定
        2.自定义指令
            需求：页面中有个输入框，页面加载获得焦点事件，autofocus
        3.自定义指令钩子函数
            bind:只会调用一次，初始化
            inserted:绑定元素插入父节点时调用
            updated:节点更新时
            componentUpdated:组件节点更新
            unbind:只调用一次，指令与元素解绑时
        v-
        4.钩子函数对应的参数 function(el,binding,vnode,oldnode)
        el:指令所绑定的元素
        binding：对象
            name:'focus'
            value:: v-focus='1+2' 3
            oldValue:指令绑定的前一个值
            expresstion:v-focus="1+1"   1+1  表达式
            arg:指令传递的值  v-focu:foo foo
            modifiers: 包含修饰符的对象 v-focus.foo foo   利用修饰符减少频繁触发change事件，不常用
        vnode:虚拟节点
        oldNode:只在update componentUpdated这两个钩子函数中有
        5.需求
            通过自定义指令实现fixed布局固定
        */
        Vue.directive("focus",{
            inserted:function(el){
                el.focus();
            }
        })
        Vue.directive('fixed',{
            inserted:function(el){
                el.style.position = "fixed"
                el.style.top = "50px"
            }
        })
    const app = new Vue({
        el:"#app",
        data:{},
        methods:{}
    })
    </script>

vue3.0变化

一 速度更快

1. 虚拟DOM重写
   编译时监测运行时的开销，重写将更有效的代码创建虚拟节点
2. 优化插槽生成
   单独重新渲染父级和子级，提升渲染性能，减少渲染开销
3. 静态树提升
4. 静态属性提升
   能监测到静态的再进行渲染，能跳过不会改变节点的打补丁的过程
5. 基于Proxy的观察者机制
   更好的监听相应对象的增加删除
   能更快的组件初始化和修补
   对ie的支持不太友好

二 体积更小
新运行时压缩后大概10kb,这个是使用了按需引入的原因，

三 更易于维护

1. 从flow转向ts
   flow:facebook公布的静态类型检查器，ts对代码进行检查
2. 解耦，使内容更加模块化
   依赖于自己的内包
3. 编译器重写
   允许更好的ide支持，创建源映射，当存在错误时，会给出行号，对开发便利。

四 更容易面向原生
运行时与平台无关，很多跨平台框架都会面向原生

五 更易于开发使用
1.提供独立的API 创建和监听响应的状态

import {observable,effect} from 'vue'
const state = observable({
	count:0
})
effect(()=>{
	console.log(`count is ${state.count}`)
}) //count is:0
state.count++ //count is:1

2.轻松定位到为什么要重新渲染组件
生命周期中增加了，何时渲染

const Component = {
	renderTriggered(event){
		console.log(`Re-render of` + this.$option.name + ` component`,event) 	
	}
}

3.增加了ts的支持
js是弱类型语言，运行时才会错误，但ts会在编译阶段就会错误