Vue.js破冰系列-1概览与实例生命周期_首页概览页面element实例-CSDN博客

本文链接：https://blog.csdn.net/ahu_524/article/details/100517978

Vue是一套用于构建用户界面的渐进式框架，这是官网对Vue的解释。什么是渐进式框架呢？我把它拆分为两块，渐进式和框架，框架好理解，渐进式(Progressive)就是说，如果要使用Vue，不需要对Vue的全部知识都搞明白才能上手做，你可以一步一步逐渐深入的使用Vue.js，它的学习曲线相对平缓。

Vue使用MVVM(Model-View-View-Model)模式，实现View和ViewModel双向绑定（vue的核心功能之一），即视图层（View）发生变化时，会自动更新到视图模型(ViewModel)上，反之亦然。

Vue.js框架可通过两种方式引入，第一种是在html页面中使用script标签引入vue.js，第二种是使用npm的方式安装vue。本系列前期不涉及前端工程化的内容，所以，使用script标签的方式引入vue.js即可。

Vue实例

引入Vue.js框架后，使用new Vue()创建一个vue的实例。在创建vue实例时，构造函数的配置参数是可选的，如果不传入配置参数，则生成一个空实例（比如，推荐使用vue空实例作为中央事件总线bus），更多的情况是要传人配置信息的，配置参数以对象的形式传入vue的构造函数。

<body>
    <div id="app">{{message}}</div>
    <!--vue.js框架引入-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        //创建Vue实例，使用对象的方式传入配置项
        const vm = new Vue({
            el:"#app",
            data:{
                message:"Hello World!"
            }
        });
    </script>
</body>

在上面的代码中，vue的实例赋值给vm，这个vm变量就是我们前面提到的ViewModel(视图模型)，可以简单的理解vue实例就是一个视图模型。这里vue.js和创建vue实例的脚本，都放在了body标签的最底部，是因为实例在创建时，需要挂载点元素，如果将脚本放在head标签中，在实例化vue时，DOM还没有被解析，使vue实例找不到对应的挂载点。

创建vue实例时，配置项较多，按功能可分为：DOM类、数据选项类、资源类、组合类、生命周期钩子函数类、其他插件数据类等6大类，下面列出创建vue实例的部分配置项：

new Vue({
  //DOM类
  el:""|Element,//可以是DOM的Element，实例的挂载点
  name:"",//在vue实例作为组件时有效，设置后组件和递归调用自己，全局注册组件ID自动作为组件的name
  template:"",//替换挂载点的元素
  render(),//渲染函数和template选项一样，返回的内容用于替换挂载点元素，它的优先级比template高
  //数据类
  data:{}|function,//实例的数据对象，如果实例是组件，用function返回数据对象
  props:{}|[],//接收来自父组件的数据
  computed:{},//计算属性
  watch:{},//监视属性
  methods:{},//自定方法
  //资源类
  directives:{},//自定义指令
  filters:{},//过滤器
  components:{},//注册子组件
  //组合类
  mixins:[],//混入的对象包含了vue实例配置选项，当多个组件有同样的功能时，可以使用混入
  extends:object|Function,//继承
  //生命周期类
  beforeCreate(),
  created(),
  beforeMount(),
  Mounted(),
  beforeUpdate(),
  updated(),
  beforeDestory(),
  destoryed(),
  //其他插件用数据类
  router:new VueRouter(),// 路由插件的配置项
  store:new Vuex.Store(),// 状态管理插插件配置项
});

本文作为破冰系列的开篇，将讲解几个简单的配置选项，后续随着学习的深入会对这些配置项一一讲解。

el 配置项是element的缩写，表示vue实例的挂载点，它可以是一个html元素，也可以是一个css的选择器，通常使用css的选择器。vue生成的DOM通过el配置项替换掉挂载点元素。

上面提到vue生成的DOM会替换挂载点元素，那vue是根据怎么来生成DOM的呢？实际上，vue是通过以下两种方式生成DOM：

template选项
render()选项

template选项用于定义生成DOM的模板，它又有两种方式，第一种为直接写入html标签，如：

<script>
  const vm = new Vue({
    el:"#app",
    template:"<h1>Hello World!</h1>",
  });
</script>

当html模板内容过于复杂时，使用这种方式效率太低。这时，可以选择第二种方式x-template，代码如下：

<body>
  <div id="app"></div>
  <script type="x-template" id="temp">
  	<ul>
      <li>张三</li>
      <li>李四</li>
  	</ul>
  </script>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
      const vm = new Vue({
        el:"#app",
        template:"#temp"
      });
  </script>
</body>

模板包裹在script标签内，script标签的type属性设置为x-template，使用id作为模板的唯一标识符，在vue中的template选项通过css id选择器获取x-template的模板内容。

render函数通过函数编程的方式返回DOM，这里细说，后面会有专门的章节讲解。

data 配置项是Vue实例的数据对象，存放在data中的数据，可以通过vm.$data获取，实例本身也代理了data中的属性，所以，vm.$data.message与vm.message等价。

在创建vue实例时，data中的数据会加入响应式系统中，所谓响应式系统，即当视图引用data属性时，data属性值发生变化后，视图会自动更新。实现响应式系统的原理是：vue通过Object.defineProperty把data属性转化为getter/setter，在触发setter时，关联的组件会重新渲染。关于响应式系统，后面会有专门的章节讨论。

vue实例生命周期

与其它语言一样，一个实例从创建到销毁的过程叫做实例的生命周期。在vue中，实例主要经过创建，挂载，更新（运行），销毁4个阶段。vue为每个阶段提供了2个钩子函数，通过实例创建时的配置项，定义对应的钩子函数内容。生命周期钩子函数：

new Vue({
  //初始化阶段
  beforeCreate(){},
  created(){},
  //挂载阶段
  beforeMount(){},
  Mounted(){},
  //运行阶段
  beforeUpdate(){},
  updated(){},
  //销毁阶段
  beforeDestory(){},
  destoryed(){},
});

beforeCreate()和created()是实例初始化阶段的前后钩子函数，beforeCreated()方法不能访问data、props、watch中定义的属性，也不能访问methods中定义的方法。
常用的是created钩子，在实例创建后调用该钩子函数，所以它可以访问上面的属性和方法。但是，该阶段虽然实例已被创建，不过该实例并没有挂载到DOM上，及DOM还没有被渲染，所以不能操作DOM，这个阶段可以做一些与后台交互的相关操作，比如从服务器上获取初始数据等。

beforeMount()和mounted()是vue实例挂载到DOM前后的钩子函数，beforeMount()在vue将模板渲染为DOM之前调用，mounted()在vue将DOM挂载到挂载点后调用，一般我们的第一个业务逻辑会在这里编写。

beforeUpdate()和updated()钩子函数在实例mounted后，数据更新前后执行。beforeDestroy() 和 destroyed() 钩子函数在组件销毁阶段执行。

beforeDestroy()和destroyed()表示实例销毁前后的调用方法，一般在beforeDestroy()方法中解绑监听事件等。