vue基础概念

MVC与MVVM

mvc

View 传送指令到 Controller
Controller 完成业务逻辑后,要求 Model 改变状态
Model 将新的数据发送到 View,用户得到反馈
通信都是单向的

mvvm

  1. 各部分之间的通信,都是双向的。
  2. View 与 Model 不发生联系,都通过 Presenter 传递。
  3. View 非常薄,不部署任何业务逻辑,称为”被动视图”(Passive View),即没有任何主动性,而 Presenter非常厚,所有逻辑都部署在那里。
  4. 它采用双向绑定(data-binding):View的变动,自动反映在 ViewModel,反之亦然。Angular 和 Ember 都采用这种模式。

参考:MVC,MVP 和 MVVM 的图示

vue

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

核心应该是“声名式地数据渲染进DOM系统”,vue很方便的把js的变量与dom进行绑定,然后改变js的变量的时候会自动dom进行渲染,而以前如jsp的方式,通过的model变量,而这个model变量是java生成的,是紧耦合在一起的。而在vue之前,改变前端数据的方式是通过jQuary的方式,拿到dom,然后设置dom的属性的方式,vue通过绑定,把这个过程做的自动化了。

vue基础语法

挂载点、模板

<!DOCTYPE html>
<html>
    <header>
        <meta charset="UTF-8">
        <title>Vue 挂载点、模板</title>
        <!-- 引入最好在head,防止抖屏 -->
        <script src="vue.js"></script>
        <body>
            <div id="root"></div>
            <script>
                new Vue({
                    // 接管id为root的内容,做好绑定
                    // 挂载点
                    el:"#root",
                    // 模板
                    template: '<h1>hello </h1>',
                    data: {
                        msg: "world"
                    }
                });
            </script>
        </body>
    </header>
</html>

事件、方法

<!DOCTYPE html>
<html>
    <header>
        <meta charset="UTF-8">
        <title>数据、属性、方法</title>
        <script src="vue.js"></script>
        <body>
            <div id="root">
                <!--  插值表达式,插入值的表达式,倒也通俗 -->
                <h1></h1>
                <!-- 会转义输出<h1>hello</h1> -->
                <div v-text="msg"></div>
                <!-- hello -->
                <div v-html="msg"></div>
                <div v-on:click="handleClick"></div>
                <!-- 与v-on等效,更加简洁 -->
                <div @click="handleClick"></div>
            </div>
            <script>
                new Vue({
                    // 接管id为root的内容,做好绑定
                    // 挂载点
                    el:"#root",
                    // 模板
                    data: {
                        msg: "<h1>hello</h1>",
                        number: 123
                    },
                    methods: {
                        handleClick: function(){
                            // 面向数据编程,而不是直接操作dom对象,修改后会自动修改页面
                            this.number = 456
                        }
                    }
                });
            </script>
        </body>
    </header>
</html>

属性绑定和双向数据绑定

<!DOCTYPE html>
<html>
    <header>
        <meta charset="UTF-8">
        <title>属性绑定和双向数据绑定</title>
        <script src="vue.js"></script>
        <div id = "root">
            <!-- 在模板指令=后,titleData为js的表达式,可用js的语法 -->
            <div v-bind:title="'bobo ' + titleData">hello</div>
            <!-- 简写 -->
            <div :title="'bobo ' + titleData">hello</div>
            <!-- 双向绑定! -->
            <input v-model="content"/>
            <div><!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  <!--[if lte IE 9]><meta http-equiv="refresh" content="0;url=/ie.html"><![endif]-->

  <meta name="author" content="zhenya">
  

  <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600|Droid+Sans+Mono' rel='stylesheet' type='text/css'>
  <link rel="shortcut icon" href="https://github.com/wangzhenyagit/wangzhenyagit.github.io/blob/master/images/site-favicon.png?raw=true" />
  <link rel="stylesheet" href="/css/main.css">
  <link rel="canonical" href="https://wangzhenyagit.github.io/2020/01/01/Java-Lock.html">
  <!-- Begin Jekyll SEO tag v2.6.1 -->
<title>Java Lock | zhenya的博客</title>
<meta name="generator" content="Jekyll v3.9.0" />
<meta property="og:title" content="Java Lock" />
<meta name="author" content="zhenya" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="为什么有synchronized?" />
<meta property="og:description" content="为什么有synchronized?" />
<link rel="canonical" href="https://wangzhenyagit.github.io/2020/01/01/Java-Lock.html" />
<meta property="og:url" content="https://wangzhenyagit.github.io/2020/01/01/Java-Lock.html" />
<meta property="og:site_name" content="zhenya的博客" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2020-01-01T00:00:00+00:00" />
<script type="application/ld+json">
{"@type":"BlogPosting","headline":"Java Lock","dateModified":"2020-01-01T00:00:00+00:00","datePublished":"2020-01-01T00:00:00+00:00","mainEntityOfPage":{"@type":"WebPage","@id":"https://wangzhenyagit.github.io/2020/01/01/Java-Lock.html"},"author":{"@type":"Person","name":"zhenya"},"url":"https://wangzhenyagit.github.io/2020/01/01/Java-Lock.html","description":"为什么有synchronized?","@context":"https://schema.org"}</script>
<!-- End Jekyll SEO tag -->

  <link type="application/atom+xml" rel="alternate" href="https://wangzhenyagit.github.io/feed.xml" title="zhenya的博客" />

  <script src="/assets/js/prefixfree.js"></script>
</head>

  <body>
    <aside id="sidebar" class="open">
  <div id="sidebar-left">
    <a id="sidebar-avatar" href="/">
      <img id="sidebar-avatar-img" alt="" src="https://github.com/wangzhenyagit/wangzhenyagit.github.io/blob/master/images/site-avatar.png?raw=true"/>
    </a>

    <div id="sidebar-social">
      <a href="/pages/feed.xml" class="sidebar-social-icon feed"></a>
      <a href="mailto:wangzhenya1234@gmail.com" class="sidebar-social-icon email"></a>
      <!-- Generate icon by yourself https://icomoon.io/app/#/select -->





  <a href="https://github.com/wangzhenyagit" class="sidebar-social-icon github" target="_blank"></a>





    </div>

    <ul id="sidebar-tags">
      <li class="sidebar-tag active" data-filter="recent">最新文章</li>
      
        
          <li class="sidebar-tag" data-filter="操作系统">操作系统</li>
        
          <li class="sidebar-tag" data-filter="杂七杂八">杂七杂八</li>
        
          <li class="sidebar-tag" data-filter="方法论">方法论</li>
        
          <li class="sidebar-tag" data-filter="读书笔记">读书笔记</li>
        
          <li class="sidebar-tag" data-filter="消息传递">消息传递</li>
        
          <li class="sidebar-tag" data-filter="性能分析">性能分析</li>
        
          <li class="sidebar-tag" data-filter="软件架构">软件架构</li>
        
          <li class="sidebar-tag" data-filter="存储系统">存储系统</li>
        
          <li class="sidebar-tag" data-filter="Java相关">Java相关</li>
        
          <li class="sidebar-tag" data-filter="工程效率">工程效率</li>
        
          <li class="sidebar-tag" data-filter="前端技术">前端技术</li>
        
          <li class="sidebar-tag" data-filter="sofa">sofa</li>
        
      
    </ul>
  </div>

  <div id="sidebar-right">
    <div id="search-box">
      <input id="search-input" type="text" placeholder="Search" />
    </div>

    <nav id="toc">
      
        
          <a class="toc-link" data-tags="sofa" href="/2020/09/04/sofa-tracer%E4%BB%8B%E7%BB%8D.html">
            sofa tracer介绍
          </a>
        
          <a class="toc-link" data-tags="sofa" href="/2020/09/04/sofa-registry%E4%BB%8B%E7%BB%8D.html">
            sofa registry介绍
          </a>
        
          <a class="toc-link" data-tags="sofa" href="/2020/09/04/sofa-lookout%E4%BB%8B%E7%BB%8D.html">
            sofa lookout介绍
          </a>
        
          <a class="toc-link" data-tags="sofa" href="/2020/09/04/Seata%E4%BB%8B%E7%BB%8D.html">
            Seata 介绍
          </a>
        
          <a class="toc-link" data-tags="sofa" href="/2020/08/31/sofa-rpc%E4%BB%8B%E7%BB%8D.html">
            sofa rpc介绍
          </a>
        
          <a class="toc-link" data-tags="sofa" href="/2020/08/22/sofaboot%E4%BB%8B%E7%BB%8D.html">
            sofa boot介绍
          </a>
        
          <a class="toc-link" data-tags="方法论" href="/2020/08/22/%E5%A4%9A%E9%97%AE%E4%B8%80%E5%B1%82.html">
            多问一层
          </a>
        
          <a class="toc-link" data-tags="方法论" href="/2020/08/22/%E5%88%BB%E6%84%8F%E7%BB%83%E4%B9%A0.html">
            刻意练习
          </a>
        
          <a class="toc-link" data-tags="方法论" href="/2020/07/20/%E5%BE%AE%E6%9C%8D%E5%8A%A1%E6%8B%86%E5%88%86%E5%8E%9F%E5%88%99.html">
            微服务拆分原则
          </a>
        
          <a class="toc-link" data-tags="软件架构" href="/2020/06/20/Zuul.html">
            Zuul
          </a>
        
          <a class="toc-link" data-tags="Java相关" href="/2020/06/14/Java-StampedLock.html">
            Java StampedLock
          </a>
        
          <a class="toc-link" data-tags="方法论" href="/2020/05/28/GraphQL.html">
            GraphQL
          </a>
        
          <a class="toc-link" data-tags="读书笔记" href="/2020/05/21/Design-Principles-and-%E7%AC%94%E8%AE%B0-%E5%89%AF%E6%9C%AC.html">
            《Design Principles and Design Patterns》读书
          </a>
        
          <a class="toc-link" data-tags="前端技术" href="/2020/04/04/JavaScrip.html">
            JavaScript语言
          </a>
        
          <a class="toc-link" data-tags="工程效率" href="/2020/02/29/CI-CD.html">
            CI CD
          </a>
        
          <a class="toc-link" data-tags="方法论" href="/2020/02/27/%E4%B8%9A%E5%8A%A1%E4%BB%B7%E5%80%BC%E6%8A%80%E6%9C%AF%E4%BB%B7%E5%80%BC.html">
            业务价值与技术价值
          </a>
        
          <a class="toc-link" data-tags="方法论" href="/2020/02/27/DDD.html">
            DDD
          </a>
        
          <a class="toc-link" data-tags="Java相关" href="/2020/01/31/Spring-Event.html">
            Spring Event
          </a>
        
          <a class="toc-link" data-tags="Java相关" href="/2020/01/31/Spring-Bean-Scope.html">
            Spring Bean Scope And LifeCycle
          </a>
        
          <a class="toc-link" data-tags="Java相关" href="/2020/01/31/Spring-Bean-LifeCycle.html">
            Spring Bean LifeCycle
          </a>
        
          <a class="toc-link" data-tags="Java相关" href="/2020/01/31/Java-ThreadLocal.html">
            Java ThreadLocal
          </a>
        
          <a class="toc-link" data-tags="Java相关" href="/2020/01/30/Spring-IOC-Dependency-Source.html">
            Spring IOC Dependency Source
          </a>
        
          <a class="toc-link" data-tags="Java相关" href="/2020/01/30/Spring-IOC-Dependency-Injection.html">
            Spring IOC Dependency Injection
          </a>
        
          <a class="toc-link" data-tags="方法论" href="/2020/01/29/%E6%95%8F%E6%8D%B7%E5%BC%80%E5%8F%91%E6%A6%82%E8%BF%B0.html">
            敏捷开发概述
          </a>
        
          <a class="toc-link" data-tags="工程效率" href="/2020/01/29/%E9%9C%80%E6%B1%82%E5%88%86%E6%9E%90%E5%B7%A5%E5%85%B7.html">
            需求分析工具
          </a>
        
          <a class="toc-link" data-tags="软件架构" href="/2020/01/26/%E9%87%8D%E6%9E%84.html">
            重构
          </a>
        
          <a class="toc-link" data-tags="软件架构" href="/2020/01/26/%E7%B3%BB%E7%BB%9F%E8%AE%BE%E8%AE%A1%E5%8E%9F%E5%88%99.html">
            系统设计原则
          </a>
        
          <a class="toc-link" data-tags="软件架构" href="/2020/01/26/%E7%B3%BB%E7%BB%9F%E6%8B%86%E5%88%86.html">
            系统拆分
          </a>
        
          <a class="toc-link" data-tags="软件架构" href="/2020/01/26/%E5%B9%82%E7%AD%89.html">
            幂等
          </a>
        
          <a class="toc-link" data-tags="软件架构" href="/2020/01/26/Sentinal.html">
            Sentinal
          </a>
        
          <a class="toc-link" data-tags="软件架构" href="/2020/01/26/Hystrix.html">
            Hystrix
          </a>
        
          <a class="toc-link" data-tags="读书笔记" href="/2020/01/15/Effective-Java-%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.html">
            《Effective Java》读书笔记
          </a>
        
          <a class="toc-link" data-tags="方法论" href="/2020/01/09/%E6%95%8F%E6%8D%B7%E5%BC%80%E5%8F%91%E6%80%9D%E8%80%83.html">
            敏捷开发思考
          </a>
        
          <a class="toc-link" data-tags="前端技术" href="/2020/01/09/vue%E5%9F%BA%E7%A1%80%E6%A6%82%E5%BF%B5.html">
            vue基础概念
          </a>
        
          <a class="toc-link" data-tags="Java相关" href="/2020/01/01/Java-Lock.html">
            Java Lock
          </a>
        
          <a class="toc-link" data-tags="Java相关" href="/2020/01/01/Java-AQS.html">
            Java AQS
          </a>
        
          <a class="toc-link" data-tags="软件架构" href="/2019/12/18/C4%E6%A8%A1%E5%9E%8B.html">
            C4模型
          </a>
        
          <a class="toc-link" data-tags="Java相关" href="/2019/06/26/Java-Type.html">
            Java Type与Generic
          </a>
        
          <a class="toc-link" data-tags="读书笔记" href="/2019/05/24/Spring-%E6%A0%B8%E5%BF%83%E7%BC%96%E7%A8%8B%E6%80%9D%E6%83%B3-%E7%AC%94%E8%AE%B0.html">
            《Spring 核心编程思想》读书
          </a>
        
          <a class="toc-link" data-tags="方法论" href="/2019/05/23/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F-%E7%AD%96%E7%95%A5%E6%A8%A1%E5%BC%8F.html">
            策略模式
          </a>
        
          <a class="toc-link" data-tags="Java相关" href="/2019/05/06/Java-%E8%99%9A%E6%8B%9F%E6%9C%BA-%E4%B8%89-G1.html">
            Java 虚拟机(三)G1
          </a>
        
          <a class="toc-link" data-tags="Java相关" href="/2019/05/02/Java-String.html">
            Java String
          </a>
        
          <a class="toc-link" data-tags="Java相关" href="/2019/05/02/Java-Integer.html">
            Java Integer
          </a>
        
          <a class="toc-link" data-tags="Java相关" href="/2019/01/15/Java-JMM.html">
            JMM
          </a>
        
          <a class="toc-link" data-tags="Java相关" href="/2019/01/15/Java-CAS.html">
            CAS
          </a>
        
          <a class="toc-link" data-tags="软件架构" href="/2018/10/14/Paxos.html">
            Paxos&ZAP
          </a>
        
          <a class="toc-link" data-tags="软件架构" href="/2018/10/14/2PC%E4%B8%8E3PC.html">
            2PC与3PC
          </a>
        
          <a class="toc-link" data-tags="Java相关" href="/2018/09/14/Java-Jna%E5%B4%A9%E6%BA%83%E5%88%86%E6%9E%90.html">
            Java Jna崩溃分析
          </a>
        
          <a class="toc-link" data-tags="方法论" href="/2018/09/10/REST-%E4%BA%8C-%E6%A1%86%E6%9E%B6%E7%BA%A6%E6%9D%9F.html">
            REST(二)框架约束
          </a>
        
          <a class="toc-link" data-tags="存储系统" href="/2018/09/04/MySql-%E4%BA%8C-%E8%BF%87%E6%BB%A4.html">
            MySql(二)过滤
          </a>
        
          <a class="toc-link" data-tags="存储系统" href="/2018/08/23/%E6%95%B0%E6%8D%AE%E5%BA%93%E8%AE%BE%E8%AE%A1%E4%B9%8B%E5%86%97%E4%BD%99%E5%AD%97%E6%AE%B5.html">
            数据库设计之冗余字段
          </a>
        
          <a class="toc-link" data-tags="存储系统" href="/2018/08/08/etcd-%E4%B8%80.html">
            etcd(一)
          </a>
        
          <a class="toc-link" data-tags="工程效率" href="/2018/08/06/k8s-%E4%B8%80-%E6%9E%B6%E6%9E%84.html">
            k8s(一)架构
          </a>
        
          <a class="toc-link" data-tags="软件架构" href="/2018/08/05/%E7%90%86%E8%A7%A3token.html">
            理解token
          </a>
        
          <a class="toc-link" data-tags="软件架构" href="/2018/08/04/oAuth%E6%B5%81%E7%A8%8B.html">
            oAuth流程
          </a>
        
          <a class="toc-link" data-tags="方法论" href="/2018/07/06/REST-%E4%B8%80-%E8%AE%BE%E8%AE%A1%E9%A3%8E%E6%A0%BC.html">
            REST(一)设计风格
          </a>
        
          <a class="toc-link" data-tags="杂七杂八" href="/2018/04/28/%E5%B8%B8%E7%94%A8%E5%9C%A8%E7%BA%BF%E5%B7%A5%E5%85%B7.html">
            常用在线工具
          </a>
        
          <a class="toc-link" data-tags="软件架构" href="/2018/04/28/RBAC%E6%9D%83%E9%99%90%E7%B3%BB%E7%BB%9F.html">
            RBAC权限系统
          </a>
        
          <a class="toc-link" data-tags="Java相关" href="/2018/04/05/Spring-EL.html">
            Spring EL
          </a>
        
          <a class="toc-link" data-tags="读书笔记" href="/2018/02/22/%E6%95%B0%E5%AD%A6%E4%B9%8B%E7%BE%8E-%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.html">
            《数学之美》读书笔记
          </a>
        
          <a class="toc-link" data-tags="读书笔记" href="/2018/02/12/%E5%88%86%E5%B8%83%E5%BC%8F%E6%9C%8D%E5%8A%A1%E6%A1%86%E6%9E%B6%E5%8E%9F%E7%90%86%E4%B8%8E%E5%AE%9E%E8%B7%B5-%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.html">
            《分布式服务框架原理与实践》读书笔记
          </a>
        
          <a class="toc-link" data-tags="读书笔记" href="/2018/02/08/Elasticsearch%E6%9D%83%E5%A8%81%E6%8C%87%E5%8D%97-%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.html">
            《Elasticsearch权威指南》读书笔记
          </a>
        
          <a class="toc-link" data-tags="读书笔记" href="/2018/02/07/%E9%AB%98%E6%80%A7%E8%83%BDMySQL-%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.html">
            《高性能MySQL》读书笔记
          </a>
        
          <a class="toc-link" data-tags="读书笔记" href="/2018/02/03/Hadoop%E6%9D%83%E5%A8%81%E6%8C%87%E5%8D%97-%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.html">
            《Hadoop权威指南》读书笔记
          </a>
        
          <a class="toc-link" data-tags="读书笔记" href="/2018/01/30/Hbae%E6%9D%83%E5%A8%81%E6%8C%87%E5%8D%97-%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.html">
            《Hbae权威指南》读书笔记
          </a>
        
          <a class="toc-link" data-tags="杂七杂八" href="/2017/12/27/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD%E7%9B%B8%E5%85%B3%E6%A6%82%E5%BF%B5.html">
            人工智能相关概念
          </a>
        
          <a class="toc-link" data-tags="存储系统" href="/2017/12/26/ES-%E5%85%AD-Finite-State-Transducers.html">
            ES(六)Finite State Transducers
          </a>
        
          <a class="toc-link" data-tags="消息传递" href="/2017/12/26/Kafka-%E4%BA%8C-%E5%9C%BA%E6%99%AF%E5%88%86%E6%9E%90.html">
            Kafka(二)场景分析
          </a>
        
          <a class="toc-link" data-tags="存储系统" href="/2017/12/25/ES-%E4%BA%94-Why-Skip-List.html">
            ES(五)Why Skip List
          </a>
        
          <a class="toc-link" data-tags="杂七杂八" href="/2017/12/21/%E5%8F%AC%E5%9B%9E%E7%8E%87%E4%B8%8E%E7%B2%BE%E7%A1%AE%E7%8E%87.html">
            召回率与精确率
          </a>
        
          <a class="toc-link" data-tags="存储系统" href="/2017/12/18/MySql-%E4%B8%80-%E7%B4%A2%E5%BC%95.html">
            MySql(一)索引
          </a>
        
          <a class="toc-link" data-tags="存储系统" href="/2017/12/18/MongoDB-VS-Hbase.html">
            MongoDB VS Hbase
          </a>
        
          <a class="toc-link" data-tags="消息传递" href="/2017/12/18/http%E5%8D%8F%E8%AE%AE.html">
            http协议
          </a>
        
          <a class="toc-link" data-tags="Java相关" href="/2017/12/06/Java-%E8%99%9A%E6%8B%9F%E6%9C%BA-%E4%BA%8C-%E7%BB%86%E8%8A%82%E5%88%86%E6%9E%90.html">
            Java 虚拟机(二)细节分析
          </a>
        
          <a class="toc-link" data-tags="Java相关" href="/2017/11/28/Java-Annotation.html">
            Java Annotations
          </a>
        
          <a class="toc-link" data-tags="软件架构" href="/2017/11/27/%E8%AF%84%E4%BB%B7%E7%B3%BB%E7%BB%9F%E8%AE%BE%E8%AE%A1.html">
            评价系统设计
          </a>
        
          <a class="toc-link" data-tags="软件架构" href="/2017/11/27/%E8%AE%A2%E5%8D%95%E7%B3%BB%E7%BB%9F%E8%AE%BE%E8%AE%A1.html">
            订单系统设计
          </a>
        
          <a class="toc-link" data-tags="软件架构" href="/2017/11/27/%E7%A7%92%E6%9D%80%E6%8A%A2%E8%B4%AD%E7%B3%BB%E7%BB%9F%E8%AE%BE%E8%AE%A1.html">
            秒杀抢购系统的设计
          </a>
        
          <a class="toc-link" data-tags="性能分析" href="/2017/11/25/%E7%A8%8B%E5%BA%8F%E7%8C%BF%E5%BA%94%E8%AF%A5%E7%9F%A5%E9%81%93%E7%9A%84%E6%95%B0%E5%AD%97.html">
            程序猿应该知道的数字
          </a>
        
          <a class="toc-link" data-tags="Java相关" href="/2017/11/25/Java-Spring.html">
            Spring基础概念
          </a>
        
          <a class="toc-link" data-tags="Java相关" href="/2017/11/25/Java-Singleton-pattern.html">
            Singleton pattern
          </a>
        
          <a class="toc-link" data-tags="Java相关" href="/2017/11/25/Java-Primitive-Data-Types.html">
            Java Primitive Data Types
          </a>
        
          <a class="toc-link" data-tags="Java相关" href="/2017/11/25/Java-NIO.html">
            Java NIO
          </a>
        
          <a class="toc-link" data-tags="Java相关" href="/2017/11/25/Java-Exceptions.html">
            Java Exceptions
          </a>
        
          <a class="toc-link" data-tags="软件架构" href="/2017/11/25/%E4%BA%AC%E4%B8%9C%E6%8A%80%E6%9C%AF%E6%A0%88.html">
            京东技术栈
          </a>
        
          <a class="toc-link" data-tags="Java相关" href="/2017/11/24/Java-Concurrent-Map.html">
            Java Concurrent Map
          </a>
        
          <a class="toc-link" data-tags="Java相关" href="/2017/11/23/Java-%E9%9D%9EConcurrent-Map.html">
            Java 非Concurrent Map
          </a>
        
          <a class="toc-link" data-tags="Java相关" href="/2017/11/21/Java-volitale.html">
            Java Volitale
          </a>
        
          <a class="toc-link" data-tags="Java相关" href="/2017/11/21/Java-ThreadPool.html">
            Java ThreadPool
          </a>
        
          <a class="toc-link" data-tags="存储系统" href="/2017/11/20/MongoDB-%E4%BA%8C-c%E5%AE%A2%E6%88%B7%E7%AB%AF.html">
            MongoDB(二)c客户端
          </a>
        
          <a class="toc-link" data-tags="存储系统" href="/2017/11/20/MongoDB-%E4%B8%89-%E6%9E%B6%E6%9E%84%E8%A7%A3%E6%9E%90.html">
            MongoDB(三)架构解析
          </a>
        
          <a class="toc-link" data-tags="存储系统" href="/2017/11/18/mongo-connector%E4%BD%BF%E7%94%A8.html">
            mongo-connector使用
          </a>
        
          <a class="toc-link" data-tags="读书笔记" href="/2017/11/17/%E8%B5%84%E6%BA%90%E6%95%B4%E7%90%86.html">
            资源整理
          </a>
        
          <a class="toc-link" data-tags="存储系统" href="/2017/11/16/%E5%AD%98%E5%82%A8%E7%B3%BB%E7%BB%9F%E7%B1%BB%E5%88%AB.html">
            存储系统类别
          </a>
        
          <a class="toc-link" data-tags="Java相关" href="/2017/11/15/Java-%E5%B9%B6%E5%8F%91%E5%AE%B9%E5%99%A8.html">
            Java 并发容器
          </a>
        
          <a class="toc-link" data-tags="存储系统" href="/2017/11/10/Cassandra%E4%BB%8B%E7%BB%8D.html">
            Cassandra介绍
          </a>
        
          <a class="toc-link" data-tags="存储系统" href="/2017/11/09/MongoDB-%E4%B8%80-%E6%BA%90%E7%A0%81%E5%AE%89%E8%A3%85.html">
            MongoDB(一)源码安装
          </a>
        
          <a class="toc-link" data-tags="存储系统" href="/2017/11/08/MongoDB-VS-ES.html">
            MongoDB VS ES
          </a>
        
          <a class="toc-link" data-tags="存储系统" href="/2017/10/25/ES-%E5%9B%9B-%E8%B7%AF%E7%94%B1%E4%B8%8E%E5%A4%9A%E7%B4%A2%E5%BC%95.html">
            ES(四)路由与多索引
          </a>
        
          <a class="toc-link" data-tags="存储系统" href="/2017/10/25/ES-%E4%B8%89-%E9%85%8D%E7%BD%AE%E4%BC%98%E5%8C%96.html">
            ES(三)配置与优化
          </a>
        
          <a class="toc-link" data-tags="Java相关" href="/2017/10/20/Java-%E8%99%9A%E6%8B%9F%E6%9C%BA-%E4%B8%80-%E5%9F%BA%E7%A1%80%E7%90%86%E8%AE%BA.html">
            Java 虚拟机(一)基础理论
          </a>
        
          <a class="toc-link" data-tags="存储系统" href="/2017/10/10/ES-%E4%BA%8C-%E8%BD%A6%E7%89%8C%E6%90%9C%E7%B4%A2.html">
            ES(二)车牌搜索
          </a>
        
          <a class="toc-link" data-tags="存储系统" href="/2017/10/09/RAID%E6%8A%80%E6%9C%AF.html">
            RAID技术
          </a>
        
          <a class="toc-link" data-tags="存储系统" href="/2017/09/30/ES-%E4%B8%80-%E8%AE%BE%E8%AE%A1%E8%A7%A3%E6%9E%90.html">
            ES(一)设计解析
          </a>
        
          <a class="toc-link" data-tags="存储系统" href="/2017/09/23/Redis-%E4%BA%8C-%E9%9B%86%E7%BE%A4%E6%96%B9%E5%BC%8F.html">
            Redis(二)集群方式
          </a>
        
          <a class="toc-link" data-tags="软件架构" href="/2017/09/23/%E9%9B%86%E7%BE%A4%E8%AE%BE%E8%AE%A1%E7%9A%84%E5%A5%97%E8%B7%AF.html">
            集群设计的套路
          </a>
        
          <a class="toc-link" data-tags="存储系统" href="/2017/09/21/ceph%E4%BD%93%E7%B3%BB%E7%BB%93%E6%9E%84.html">
            ceph体系结构
          </a>
        
          <a class="toc-link" data-tags="存储系统" href="/2017/09/18/fastdfs-%E4%BA%8C-%E9%85%8D%E7%BD%AE.html">
            fastdfs(二)Centos下双机配置
          </a>
        
          <a class="toc-link" data-tags="存储系统" href="/2017/09/13/fastdfs-%E4%B8%80-%E8%AE%BE%E8%AE%A1%E8%A7%A3%E6%9E%90.html">
            fastdfs(一)设计解析
          </a>
        
          <a class="toc-link" data-tags="存储系统" href="/2017/09/10/search-engine-vs-db-index.html">
            搜索引擎与数据库检索区别
          </a>
        
          <a class="toc-link" data-tags="存储系统" href="/2017/09/10/MyISAM-vs-InnoDB.html">
            MyISAM与InnoDB引擎
          </a>
        
          <a class="toc-link" data-tags="存储系统" href="/2017/09/10/Hbase-%E4%B8%80-%E5%9F%BA%E7%A1%80%E7%89%B9%E6%80%A7.html">
            Hbase(一)基础特性
          </a>
        
          <a class="toc-link" data-tags="消息传递" href="/2017/09/10/message-queue-base.html">
            消息队列(一)介绍与常见实现
          </a>
        
          <a class="toc-link" data-tags="消息传递" href="/2017/09/10/message-queue-amq.html">
            消息队列(二)AMQ
          </a>
        
          <a class="toc-link" data-tags="消息传递" href="/2017/09/10/Kafka-%E4%B8%80-%E5%9F%BA%E7%A1%80%E7%89%B9%E6%80%A7.html">
            Kafka(一)基础特性
          </a>
        
          <a class="toc-link" data-tags="软件架构" href="/2017/09/10/loadbance.html">
            负载均衡技术
          </a>
        
          <a class="toc-link" data-tags="性能分析" href="/2017/09/06/cpu-vs-gpu.html">
            密集计算下CPU vs GPU
          </a>
        
          <a class="toc-link" data-tags="性能分析" href="/2017/09/06/MongoDB%E4%B8%8EKafka.html">
            MongoDB与Kafka性能测试
          </a>
        
          <a class="toc-link" data-tags="性能分析" href="/2017/09/05/nginx-vs-haproxy.html">
            Nginx与HAproxy对比测试
          </a>
        
          <a class="toc-link" data-tags="杂七杂八" href="/2017/09/05/git-use.html">
            Git 使用
          </a>
        
          <a class="toc-link" data-tags="杂七杂八" href="/2017/04/14/%E7%94%A8Debug-Diagnostic%E8%AF%8A%E6%96%AD%E5%86%85%E5%AD%98%E6%B3%84%E9%9C%B2%E9%97%AE%E9%A2%98.html">
            用Debug Diagnostic诊断内存泄露问题
          </a>
        
          <a class="toc-link" data-tags="读书笔记" href="/2016/11/09/bigtable.html">
            《Google-Bigtable》读书笔记
          </a>
        
          <a class="toc-link" data-tags="读书笔记" href="/2016/10/12/my-internet-methodology.html">
            《我的互联网方法论》读书笔记
          </a>
        
          <a class="toc-link" data-tags="读书笔记" href="/2016/10/12/logical-thinking.html">
            《罗辑思维》笔记
          </a>
        
          <a class="toc-link" data-tags="杂七杂八" href="/2016/09/18/%E5%88%9D%E8%AF%86%E5%A4%A7%E6%95%B0%E6%8D%AE.html">
            初识大数据
          </a>
        
          <a class="toc-link" data-tags="读书笔记" href="/2016/08/26/Google%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83.html">
            Google编码规范(c++)
          </a>
        
          <a class="toc-link" data-tags="读书笔记" href="/2016/08/05/NASA-%E7%9A%84-10-%E5%A4%A7%E7%BC%96%E7%A8%8B%E8%A7%84%E5%88%99.html">
            NASA 的 10 大编程规则(c++)
          </a>
        
          <a class="toc-link" data-tags="方法论" href="/2016/08/05/%E7%9F%AD%E8%BF%AD%E4%BB%A3-%E6%BC%94%E5%8C%96-%E8%9E%BA%E6%97%8B%E4%B8%8A%E5%8D%87-%E5%A4%9A%E7%BB%B4%E6%95%B0%E6%8D%AE.html">
            短迭代、演化、螺旋上升、多维数据
          </a>
        
          <a class="toc-link" data-tags="读书笔记" href="/2016/07/12/%E5%A4%A7%E5%9E%8B%E7%BD%91%E7%AB%99%E6%8A%80%E6%9C%AF%E6%9E%B6%E6%9E%84-%E6%A0%B8%E5%BF%83%E5%8E%9F%E7%90%86%E4%B8%8E%E6%A1%88%E4%BE%8B%E5%88%86%E6%9E%90-%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.html">
            《大型网站技术架构:核心原理与案例分析》读书笔记
          </a>
        
          <a class="toc-link" data-tags="方法论" href="/2016/07/12/%E6%95%8F%E6%8D%B7%E6%B5%8B%E8%AF%95%E7%AE%A1%E7%90%86%E5%9F%B9%E8%AE%AD.html">
            敏捷测试管理培训
          </a>
        
          <a class="toc-link" data-tags="方法论" href="/2015/12/31/%E5%AD%A6%E4%B9%A0&%E6%80%9D%E8%80%83&%E5%88%9B%E6%96%B0.html">
            学习&思考&创新
          </a>
        
          <a class="toc-link" data-tags="方法论" href="/2015/12/31/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95%E6%A1%86%E6%9E%B6.html">
            单元测试框架
          </a>
        
          <a class="toc-link" data-tags="存储系统" href="/2015/11/12/Redis-%E4%B8%80-%E5%9F%BA%E7%A1%80%E7%89%B9%E6%80%A7.html">
            Redis(一)基础特性
          </a>
        
          <a class="toc-link" data-tags="软件架构" href="/2015/11/03/Android%E6%B6%88%E6%81%AF%E5%A4%84%E7%90%86%E6%9C%BA%E5%88%B6.html">
            Android的消息处理机制
          </a>
        
          <a class="toc-link" data-tags="软件架构" href="/2015/11/03/12306%E8%AE%BE%E8%AE%A1%E9%97%AE%E9%A2%98.html">
            12306设计问题
          </a>
        
          <a class="toc-link" data-tags="性能分析" href="/2015/11/02/dynamic&%E9%94%81%E7%AB%9E%E4%BA%89%E7%B3%BB%E7%BB%9F%E5%BC%80%E9%94%80%E5%88%86%E6%9E%90.html">
            dynamic&锁竞争系统开销分析
          </a>
        
          <a class="toc-link" data-tags="性能分析" href="/2015/11/02/boost-bind%E6%80%A7%E8%83%BD%E5%BC%80%E9%94%80%E5%88%86%E6%9E%90.html">
            boost bind性能开销分析
          </a>
        
          <a class="toc-link" data-tags="消息传递" href="/2015/11/02/mangos-login.html">
            mangos(二)认证登录基本流程
          </a>
        
          <a class="toc-link" data-tags="操作系统" href="/2015/10/30/condition-wait.html">
            条件变量的虚假唤醒
          </a>
        
          <a class="toc-link" data-tags="消息传递" href="/2015/10/30/mangos-msghandle.html">
            mangos(一)概述与消息处理机制
          </a>
        
          <a class="toc-link" data-tags="操作系统" href="/2015/08/10/%E5%AE%8C%E6%88%90%E7%AB%AF%E5%8F%A3.html">
            完成端口(Q&A)
          </a>
        
          <a class="toc-link" data-tags="杂七杂八" href="/2015/08/08/wget%E7%AA%81%E7%A0%B4cookie%E9%99%90%E5%88%B6-%E7%94%A8wget%E6%89%B9%E9%87%8F%E4%B8%8B%E8%BD%BD%E4%B8%AD%E5%9B%BD%E8%81%94%E9%80%9A%E6%B2%83%E5%95%86%E5%BA%97app.html">
            wget突破cookie限制
          </a>
        
          <a class="toc-link" data-tags="读书笔记" href="/2015/08/08/Bjarne-Stroustrup-%E8%AF%AD%E5%BD%95.html">
            Bjarne Stroustrup 语录
          </a>
        
          <a class="toc-link" data-tags="操作系统" href="/2015/07/09/%E5%8D%95%E6%9C%BAtcp%E5%B9%B6%E5%8F%91%E8%BF%9E%E6%8E%A5%E9%97%AE%E9%A2%98.html">
            单机tcp并发连接
          </a>
        
          <a class="toc-link" data-tags="读书笔记" href="/2014/12/25/%E4%BB%A3%E7%A0%81%E5%A4%A7%E5%85%A8.html">
            《代码大全》读书笔记
          </a>
        
          <a class="toc-link" data-tags="杂七杂八" href="/2014/09/26/Real-World-Concurrency.html">
            Real-World Concurrency(翻译)
          </a>
        
          <a class="toc-link" data-tags="杂七杂八" href="/2014/09/17/%E6%85%8E%E7%94%A8%E8%AF%BB%E5%86%99%E9%94%81.html">
            慎用读写锁
          </a>
        
          <a class="toc-link" data-tags="杂七杂八" href="/2014/09/13/%E9%97%AD%E5%8C%85-closure.html">
            闭包(closure)
          </a>
        
          <a class="toc-link" data-tags="杂七杂八" href="/2014/09/13/C++%E4%B8%AD%E7%9A%84delegate.html">
            C++中的delegate
          </a>
        
          <a class="toc-link" data-tags="操作系统" href="/2014/08/30/%E5%A4%9A%E7%BA%BF%E7%A8%8B%E4%B8%ADcondition-wait.html">
            多线程中condition wait
          </a>
        
          <a class="toc-link" data-tags="杂七杂八" href="/2014/08/29/%E5%87%BD%E6%95%B0%E5%AF%B9%E8%B1%A1.html">
            函数对象
          </a>
        
          <a class="toc-link" data-tags="方法论" href="/2014/07/27/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%E6%80%BB%E7%BB%93.html">
            设计模式总结
          </a>
        
          <a class="toc-link" data-tags="读书笔记" href="/2013/08/09/Effective-C++-%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.html">
            《Effective C++》读书笔记
          </a>
        
          <a class="toc-link" data-tags="读书笔记" href="/2012/11/06/The-Mythical-Man-Month.html">
            《人月神话》读书笔记
          </a>
        
          <a class="toc-link" data-tags="操作系统" href="/2012/07/10/linux-process-para.html">
            Linux下进程具体属性
          </a>
        
          <a class="toc-link" data-tags="方法论" href="/2012/06/26/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%9A%84%E7%90%86%E8%A7%A3.html">
            面向对象的理解
          </a>
        
          <a class="toc-link" data-tags="杂七杂八" href="/2012/05/17/%E9%AB%98%E6%95%88%E7%9A%84%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%A8%8B%E5%BA%8F.html">
            高效的服务器程序
          </a>
        
          <a class="toc-link" data-tags="操作系统" href="/2012/05/16/epoll%E5%92%8Cselect%E5%8C%BA%E5%88%AB.html">
            epoll和select区别
          </a>
        
          <a class="toc-link" data-tags="杂七杂八" href="/2012/05/01/%E6%B5%B7%E9%87%8F%E6%95%B0%E6%8D%AE%E9%97%AE%E9%A2%98%E6%80%BB%E7%BB%93.html">
            海量数据问题总结
          </a>
        
          <a class="toc-link" data-tags="操作系统" href="/2012/04/18/linux-core.html">
            linux操作系统及内核
          </a>
        
      
    </nav>
  </div>
</aside>


    <main id="main" class="open">
      <article class="post container">
  <div class="post-meta">
    <span class="post-meta-span date">2020 January 01</span>
    
    <span class="post-meta-span tag">Java</span>
    
  </div>

  <h1 class="post-title">Java Lock</h1>
  <h2 id="为什么有synchronized">为什么有synchronized?</h2>

<p>c++中并没有这种锁住代码块的,而且不需要unlock的操作,虽然有各种Guard锁,但是只是利用了RAII来进行锁的释放。</p>

<p>最主要原因可能是应用简单:</p>
<ul>
  <li>不需要unlock,也就不需要考虑各种异常情况,会降低死锁的可能性</li>
  <li>能够在方法前加上这关键字,该方法就是同步的了,很多类库如Vector、StringBuffer都是这样干的</li>
</ul>

<p>简单的同时,也省略了一些特性,例如与ReentranLock比:</p>
<ul>
  <li>不是公平的(实际情况中大多场景不要求严格公平,维护公平对性能有消耗)</li>
  <li>不能被中断(实际应用被中断的场景也不多)</li>
  <li>不支持中断、超时、尝试获取锁</li>
</ul>

<h2 id="为什么在使用条件变量的时候需要while条件不满足而不是if条件不满足">为什么在使用条件变量的时候,需要while(条件不满足)而不是if(条件不满足)?</h2>

<ul>
  <li>在操作系统,是因为会有“虚假唤醒”,线程被错误唤醒,唤醒的时候条件可能还没满足,所以需要再次检查一下条件。</li>
  <li>在java中,最低也是要有个if(条件不满足)的判断,因为线程被唤醒的时候,并不是无缝切换,而只是从条件队列移动到了同步队列的后面,虽然当时移动的时候是满足的,但是在同步队列中排队后,可能条件就不满足了。</li>
</ul>

<h2 id="重量级锁">重量级锁</h2>
<blockquote>
  <p>内置锁在Java中被抽象为监视器锁(monitor)。在JDK 1.6之前,监视器锁可以认为直接对应底层操作系统中的互斥量(mutex)。这种同步方式的成本非常高,包括系统调用引起的内核态与用户态切换、线程阻塞造成的线程切换等。因此,后来称这种锁为“重量级锁”。</p>
</blockquote>

<p>之所以重,是因为每次锁都是直接使用系统调用,导致内核态与用户态切换、甚至线程的阻塞,然后线程切换。</p>

<p>以下,所有的自旋锁、轻量级锁、偏向锁,都是为了,不进行内核态与用户态切换、不进行线程切换。</p>

<h2 id="轻量级锁">轻量级锁</h2>

<p>与重量级锁类似,在Mark word存锁的地址,在从偏向锁升级重量级锁前,会有自旋锁的操作。</p>

<h2 id="偏向锁">偏向锁</h2>

<blockquote>
  <p>大多数情况下,锁不仅不存在多线程竞争,而且总是由同一线程多次获得。</p>
</blockquote>

<p>这是偏向锁设计的初衷。这样,在线程进入同步块的时候,不需要进行CAS操作进行加锁和解锁,只需要测试当前线程的Mark Word是否存在指向当前线程的偏向锁,在无竞争的时候几乎没有任何的消耗。</p>

<p>默认的JVM是会开启偏向锁的特性的。</p>

<h2 id="锁膨胀">锁膨胀</h2>

<ul>
  <li>在jvm没有显示关闭偏向锁的情况下,初始状态时默认是偏向锁时,线程请求先通过CAS替换mark word中threadId,如果替换成功则该线程持有当前锁。如果替换失败,锁会升级为轻量级锁,</li>
  <li>线程请求会尝试CAS替换mark word中指向栈中锁记录的指针,如果替换成功则该线程持有当前锁。
如果替换失败,当前线程会自旋一定次数,继续尝试获取CAS替换,如果超过一定自旋次数,锁升级为重量级锁。</li>
</ul>

<h2 id="参考">参考</h2>
<p><a href="https://juejin.im/post/5a5c09d051882573282164ae">浅谈偏向锁、轻量级锁、重量级锁</a></p>

</article>

<div class="post-share">
  <div class="container">
    <a href="https://twitter.com/share?url=https://wangzhenyagit.github.io/2020/01/01/Java-Lock.html&text=Java Lock" target="_blank" class="post-share-icon twitter"></a>
    <a href="https://www.evernote.com/clip.action?url=https://wangzhenyagit.github.io/2020/01/01/Java-Lock.html&title=Java Lock" target="_blank" class="post-share-icon evernote"></a>
    <a href="http://service.weibo.com/share/share.php?url=https://wangzhenyagit.github.io/2020/01/01/Java-Lock.html&title=Java Lock" target="_blank" class="post-share-icon weibo"></a>
  </div>
</div>


<div class="comment container">
  <div id="disqus_thread">
  </div>
</div>



      <div class="footer">
        <div class="container">
          <p class="footer-entry">All content is licensed under <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA</a></p>
          <p class="footer-entry">Buit with <a href="http://jekyllrb.com/" target="_blank">Jekyll</a> and <a href="https://github.com/P233/3-Jekyll" target="_blank">3-Jekyll theme</a> • Hosted on <a href="https://pages.github.com/" target="_blank">Github</a></p>
        </div>
      </div>
    </main>

    <button id="menu" class="open">
      <span id="menu-icons"></span>
    </button>

    <button id="post-toc-menu">
      <span id="post-toc-menu-icons"></span>
    </button>
    <div id="post-toc">
      <span id="post-toc-title">Table of Contents</span>
      <ul id="post-toc-ul"></ul>
    </div>

    <script src="/assets/js/jquery-2.1.3.min.js"></script>
<script src="/assets/js/jquery.pjax.js"></script>
<script src="/assets/js/nprogress.js"></script>
<script src="/assets/js/main.js"></script>




<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-54767140-1', 'yansu.org');
  ga('send', 'pageview');
</script>


  </body>
</html>
</div>
        </div>
        <body>
            <script>
                new Vue({
                    el:"#root",
                    // 模板
                    data: {
                        titleData: "this is hello",
                        content: "content xxx"
                    }
                });
            </script>
        </body>
    </header>
</html>

计算属性与侦听器

<!DOCTYPE html>
<html>
    <header>
        <meta charset="UTF-8">
        <title>计算属性与侦听器</title>
        <script src="vue.js"></script>
        <div id = "root">
            姓:<input v-model="firstName"/>
            名:<input v-model="lastName"/>
            <div></div>
            <div>8</div>
        </div>
        <body>
            <script>
                new Vue({
                    el:"#root",
                    data: {
                        firstName: "",
                        lastName: "",
                        count: 0
                    },
                    // 只有在用到的属性有变化的时候才会改变
                    computed: {
                        fullName: function() {
                            return this.firstName + this.lastName;
                        }
                    },
                    watch: {
                        // 可以监听computed中的值,也可以监听data中的值的变化
                        firstName: function(){
                            this.count++;
                        },
                        fullName: function(){
                            this.count++;
                        }
                    }
                });
            </script>
        </body>
    </header>
</html>

v-if v-show v-for

<!DOCTYPE html>
<html>
    <header>
        <meta charset="UTF-8">
        <title>v-if,v-show,v-for</title>
        <script src="vue.js"></script>
        <div id = "root">
            <!-- v-if会让整个dom元素从dom树上消失 -->
            <div v-if="show">hello</div>
            <!-- 而v-show会控制元素的display属性,dom元素还在 -->
            <div v-show="show">world</div>
            <button @click="handleClick">toggle</button>
            <ul>
                <li v-for="item of list" :key="item"></li>
                <li v-for="(item, index) of list" :key="index">index  item </li>
            </ul>
        </div>
        <body>
            <script>
                new Vue({
                    el:"#root",
                    data: {
                        show: true,
                        list: [1, 2, 3]
                    },
                    methods: {
                        handleClick: function(){
                            this.show = !this.show;
                        }
                    }
                });
            </script>
        </body>
    </header>
</html>
Table of Contents