What is the difference between creating a menu with .getUI().createMenu() and .addMenu()?

Question

What is the difference between these two ways of getting the same thing (a new menu item)?

Version 1

 function onOpen(e) {
   SpreadsheetApp.getUi()
       .createMenu('My Menu')
       .addItem('My Menu Item', 'myFunction')
       .addSeparator()
       .addSubMenu(SpreadsheetApp.getUi().createMenu('My Submenu')
           .addItem('One Submenu Item', 'mySecondFunction')
           .addItem('Another Submenu Item', 'myThirdFunction'))
       .addToUi();
 }

Version 2

function onOpen() {
  var menu = [{name: "My Menu Item", functionName: "myFunction"}]
  SpreadsheetApp.getActiveSpreadsheet().addMenu("My Menu", menu);
}

Answer 1

addMenu

This is a method of Spreadsheet class, i.e., it only applies to spreadsheets. All it does is add a new menu item with second-level submenus. On the upside, the syntax is very simple.

getUi

This method is currently available for three apps: SpreadsheetApp, DocumentApp, and FormApp. It returns an instance of user interface which can be used for more than just adding a menu item. One can show alerts, prompts, dialogs, and even add an interactive sidebar with custom content. Also, the menu creating options are richer: they allow separators and nested submenus. There are special add-on menus, too. Accordingly, the syntax is more verbose.

Conclusion

Neither of two methods is deprecated; use whichever fits your goal better.

Answer 2

Another difference: you cannot add submenus (child menu items under parent menu items) with addMenu. This limitation pretty much self-deprecates the addMenu method despite the cool syntax.