这个组件设计起来很简单,这是起初的思路

 <div class="bar" ref="bar">
   <div class="contianer" :style="barStyle"></div>
 </div>
</template>
   props:{
       progress:{
           type:Number,
           default:()=>0.3
   computed:{
       barStyle(){
           const w=this.$el.clientWidth
           return{
               background:'#0176FF',
               borderRadius:'4px',
               height: '18px' ,
               // width:'57px'
               width:`${w*this.progress}px`
报错：
 
 主要原因就是this.$el为undefined，也就是拿不到模板
 
    export default {
    props:{
        progress:{
            type:Number,
            default:()=>0.3
    data(){
        return{
            offset:0
    computed:{
        barStyle(){
            return{
                background:'#0176FF',
                borderRadius:'4px',
                height: '18px' ,
                width:`${this.offset}px`
    mounted(){
        this.setOffset(this.progress)
    methods:{
        setOffset(progress){
            const w=this.$el.clientWidth
            this.offset=w*progress
解决思路也很简单，维护了一个offset变量，用来计算偏移量。
 computed执行了两次，第一次offset为0 第二次是在mounted之后offset为1
 
为啥在computed中拿不到模板？computed执行时机是什么时候？
watch执行时机是什么时候呢？是否可以拿到模板呢？
 
1.watch不开起立即监听，
 在这个例子中监听offset的变化
 
    watch:{
        offset:{
            handler(){
                console.log('watch')
其他生命周期钩子也加上console
 打印结果如下：
 
 很明显 computed执行时机在页面首次渲染时是在beforeMount后 mounted之前
 而watch是依赖发生变化才会执行(不开起立即监听情况),所以在mounted后offset改变了watch才会执行，而watch执行是优先于其他钩子的。computed也和初次渲染时执行情况类似，在beforeUpdate之后和updated之前，由此可见computed是永远拿不到最新的模板的。
 
2.watch开启立即监听
 
    watch:{
        offset:{
            handler(){
                console.log('watch')
            },immediate:true
更加证明了之前的结论，watch执行时机是优先于其他钩子的，computed执行时机是在页面更新/渲染前 和页面更新/渲染 之间执行的。二者都拿不到最新的模板。
				
1.关于create函数和watch执行顺序问题，一般在watch里面写上immediate：true，会使得执行优先级高于created，这种情况导致的结果是父级组件无法监测到正确的值，
2.watch对于普通类型的变量监听没什么好说的，但是对于对象型的，是不支持直接进行监测的
3.不推荐直接在created函数中使用watch
				
上篇文章说到使用原生的StopWatch查看程序执行时间，本文将介绍使用注解+AOP(面向切面编程)的方式实现其功能，一来可以快速使用StopWatch功能，二来让大家熟悉一下如何使用注解进行切面编程
1. 自定义一个注解 StopWatchTime
@Retention(RetentionPolicy.RUNTIME)
@Target({METHOD})
public @interface St...
				
watch 详解watch 简介watch 语法选项参数示例
watch 简介
watch 命令可以将命令的输出结果输出到标准输出设备，多用于周期性执行命令和定时执行命令。
watch命令 以周期性的方式执行给定的指令，指令输出以全屏方式显示。watch是一个非常实用的命令，基本所有的Linux发行版都带有这个小工具，如同名字一样，watch可以监测一个命令的运行结果，不需要一遍遍的去执行。
wa...
				
Vue.js 是一种流行的 JavaScript 框架，它提供了许多使用的 API 来开发单页面应用程序（SPA）和动态用户界面交互。Vue.js 常用的两种 API 是 watch 和 computed，这两种 API 都是用于监测数据变化并做出相应响应的。
watch 是 Vue.js 的一个实例 API，它用于监测指定属性的变化并在发生变化时执行特定的回调函数。watch 观察的数据称为依赖项。当依赖项发生变化时，回调函数将被执行。watch 可以在实例创建时被定义，也可以在实例运行时动态添加监视器。当需要监控的数据是异步获取的时候，watch 是非常使用的。
相比之下，computed 是一种被设计用来计算被动属性的 Vue.js 的 API 。computed 挂载在 Vue 实例上，可以根据依赖项的值自动计算新值，并返回结果。这些依赖项可以是 data 选项中的属性，也可以是其他 computed 属性，还可以是 store 中的数据等。computed 运算是基于缓存的，即只有计算依赖项发生变化才会重新计算。computed 的好处在于，当计算结果改变时，Vue.js 会自动调用 computed 属性的所有依赖项，因此无需像 watch 监听数据一样重复编写代码。computed 属性非常适合计算相对复杂的属性，或者根据其他组件属性计算其他属性的场景。
总而言之，watch 和 computed 都是 Vue.js 观察数据变化的 API，但是它们的具体用途略有不同。 watch 主要用于监视将来变化的属性，而 computed 则是用于根据现有的数据计算新的属性。根据具体的场景，选择合适的监视器可以提高Vue.js应用程序的性能和响应能力。
                    blueIce010: 
                    promise.then(null, reason => console.log(reason)).catch(reason => console.log(reason))
应该只有then中的console.log会被执行，catch中的不会被执行。
                var、let、const关键字的详细解读
                    weixin_47717328: 
                浅谈JS中的执行上下文和作用域链(基础)
                    yun易小名: 
                    我得来抱大腿
                Vue2组件间通信——父传子值props
                    qq_53343135: